A Resource, ResourceRelation, or URI string
The resolved resource state, data, and resource object
import { Suspense } from 'react';
import { useSuspenseResource, useClient } from '@hateoas-ts/resource-react';
import type { User } from './types';
function UserProfile({ userId }: { userId: string }) {
const client = useClient();
const { data } = useSuspenseResource(
client.go<User>(`/api/users/${userId}`)
);
// No loading check needed - component suspends until data is ready
return <div>Welcome, {data.name}!</div>;
}
// Wrap with Suspense boundary
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<UserProfile userId="123" />
</Suspense>
);
}
Requires React 19 or later. For React 18, use useResource instead.
Suspense-enabled hook for fetching a resource.
Uses React 19's
use()hook to suspend rendering until the resource data is available. The promise is cached in useMemo to ensure the same promise reference is used across React re-renders during suspend (React 19 requirement).