React Suspense — What It Is and How to Use It
The Interview Question
What is React Suspense? What can you use it for today and what's still experimental?
Expert Answer
Suspense is React's mechanism for declaratively handling asynchronous operations in the component tree. Instead of manually tracking loading states with useState and useEffect, you wrap async components in a Suspense boundary and provide a fallback UI. When a component inside the boundary 'suspends' (throws a promise), React shows the fallback until the promise resolves. Today, Suspense is production-ready for two use cases: code splitting with React.lazy (available since React 16.6) and data fetching with compatible libraries like Relay, Next.js, and the use() hook in React 19. The Suspense boundary is the 'try-catch' equivalent for loading states — you can nest them for granular loading UI or use a single boundary for a whole page.
Key Points to Hit in Your Answer
- Production-ready for: React.lazy code splitting, framework data fetching (Next.js, Relay)
- React 19 added the use() hook for Suspense-compatible data fetching
- Suspense boundaries are like try-catch for loading states
- Nest boundaries for granular loading UIs (skeleton screens per section)
- Works with Concurrent Mode for smoother transitions (startTransition)
- Not a replacement for error boundaries — Suspense handles loading, error boundaries handle errors
Code Example
// Code splitting with React.lazy + Suspense
const Dashboard = React.lazy(() => import('./Dashboard'));
function App() {
return (
<Suspense fallback={<Skeleton />}>
<Dashboard />
</Suspense>
);
}
// Nested Suspense for granular loading
<Suspense fallback={<PageSkeleton />}>
<Header />
<Suspense fallback={<ChartSkeleton />}>
<AnalyticsChart />
</Suspense>
<Suspense fallback={<TableSkeleton />}>
<DataTable />
</Suspense>
</Suspense>What Interviewers Are Really Looking For
Senior candidates should distinguish between what's production-ready and what's experimental. Mentioning how Suspense works with startTransition for non-blocking updates shows deep understanding. Explaining the 'throw a promise' mechanism (even briefly) demonstrates you understand the internals.
Practice This Question with AI Grading
Reading about interview questions is a start — but practicing with real-time AI feedback is how you actually get better. Goliath Prep grades your answers instantly and tells you exactly what you're missing.
Start Practicing Free →