Suspense lets components 'wait' for something before rendering, with fallback UI declared in the tree. Concurrent features let React interrupt low-priority work.
Common Interview Questions
Q: What is Suspense?
Answer: While Comments suspends (e.g., lazy load or data framework), React shows fallback. When ready, it swaps in the real UI.
<Suspense fallback={<Spinner />}>
<Comments />
</Suspense>
Q: What is useTransition?
Answer: Marks state updates as non-urgent so React keeps the UI responsive. isPending drives loading indicators for slow transitions.
const [isPending, startTransition] = useTransition();
startTransition(() => setTab("posts"));
Q: useDeferredValue?
Answer: Defers updating a value so urgent updates (typing) render first and deferred value catches up — useful for expensive lists filtered by fast input.
Q: Suspense for data fetching in React 19?
Answer: Discuss framework integration (Next.js, Relay). Core Suspense still coordinates async UI; data patterns depend on router and caching layer.
Key Points for Interviews
-
Suspense requires throwing promises or framework support
-
Concurrent rendering is interruptible and resumable
-
useTransition for tab switches and heavy filters
-
Avoid manual isLoading flags where Suspense fits
-
Works with React.lazy for code splitting