React · Chapter 42 of 42
Suspense for Data Fetching
Beyond code splitting, React's Suspense mechanism is expanding to support data fetching, letting components 'suspend' rendering until their data is ready, with a fallback UI shown automatically.
Frameworks like Next.js and libraries like React Query/Relay integrate with Suspense to simplify loading state management.
How it works conceptually
A component that isn't ready to render (still fetching data) throws a promise; the nearest `<Suspense>` boundary catches it and shows a fallback until the promise resolves.
Where it's used
Meta-frameworks like Next.js App Router and Remix, along with data libraries built for Suspense, use this pattern to simplify async UI.
Example 1 (jsx)
import { Suspense } from "react";
function ProfilePage() {
return (
<Suspense fallback={<p>Loading profile...</p>}>
<ProfileDetails />
</Suspense>
);
}Output
Loading profile... then the profile content once data resolvesSuspense shows a fallback while ProfileDetails' data dependency resolves.
Key points
- Suspense can coordinate loading states for async data, not just lazy code.
- A suspending component effectively pauses rendering until ready.
- Frameworks and data libraries provide the Suspense-compatible data fetching.
- This pattern simplifies deeply nested loading state management.
💡 Note: Manually implementing Suspense-compatible data fetching is advanced — most teams rely on a framework or library for this.