Q36: How does Suspense-enabled Data Fetching work under the hood?
When a component wrapped in <Suspense> reads data that is still loading, the data fetching library throws a promise. Suspense catches the thrown promise, pauses component tree rendering, displays the fallback UI, and retries rendering once the promise resolves.
Suspense Data Fetching Wrapper
function UserProfile({ userResource }) {
// Throws promise if pending; returns data if resolved
const user = userResource.read();
return <h1>{user.name}</h1>;
}
// Usage
<Suspense fallback={<SkeletonLoader />}>
<UserProfile userResource={resource} />
</Suspense>💡 userResource.read() throws pending promise that Suspense catches to render SkeletonLoader.
Key Takeaways
- Components throw pending promises when data is loading.
- Suspense catches promises, renders fallback UI, and resumes rendering upon resolution.
Knowledge Check
What JavaScript primitive does a component 'throw' to signal to Suspense that data is currently loading?