Performance & Patterns
React Suspense
Suspense lets a component declare that it is waiting for something and shows a fallback until it is ready. It works for lazily loaded code and, from React 18 onward, for data fetching in frameworks that support it.
What is Suspense in React?
Suspense lets a component declare that it is waiting for something and shows a fallback until it is ready. It works for lazily loaded code and, from React 18 onward, for data fetching in frameworks that support it.
Suspense example
<Suspense fallback={<HeaderSkeleton />}>
<ProfileHeader />
</Suspense>
<Suspense fallback={<ListSkeleton rows={5} />}>
<ApplicationList />
</Suspense>How this works
Two boundaries mean the header can appear as soon as it is ready without waiting for the slower list. One boundary around both would hold everything back to the slowest part.
Key points to remember
- A boundary catches suspensions from anywhere in its subtree.
- Place boundaries where a partial page is genuinely useful.
- Combine with an error boundary — Suspense handles waiting, not failure.
React Suspense— Interview Questions & FAQs
Can I use Suspense for data fetching in a plain React app?+
Only through a library that supports it, or with the React 19 use API. Plain fetch in useEffect does not suspend — the component renders immediately with empty state.