Suspense Overview

Suspense lets a child announce it is not ready (usually by throwing a promise internally) so React can show the nearest fallback instead of blocking the whole tree ad hoc. You place boundaries where loading UI should appear.

Docs: Suspense, Streaming.

Lazy code loading

const Map = lazy(() => import('./Map'));

<Suspense fallback={<div className="skeleton map" />}>
  <Map />
</Suspense>

See code splitting.

Data and frameworks

In frameworks with Suspense-aware data (Next App Router RSC streaming, Relay, some routers), components can suspend while data loads. You still need boundaries:

// Next.js
<Suspense fallback={<ReviewsSkeleton />}>
  <Reviews productId={id} />
</Suspense>

Without a boundary, the nearest parent (or the whole page) waits. See streaming in Next.

Mental model

1. Child suspends.
2. React finds the closest Suspense boundary.
3. Shows that boundary’s fallback.
4. When ready, renders the child and commits.

Nested boundaries let fast shell paint while slow panels stream in.

Not an error boundary

Suspense handles loading, not errors. Failed fetches and render throws need error boundaries / error.tsx. Often you wrap both:

<ErrorBoundary>
  <Suspense fallback={<Spinner />}>
    <Profile />
  </Suspense>
</ErrorBoundary>

Interview out-loud

“Suspense shows a fallback while children are loading code or data via a framework that supports it. I place boundaries around independent panels so the shell can render early. Errors still need error boundaries; Suspense is not a try/catch for failures.”

Related on this site

• Code Splitting with React.lazy
• Error Boundaries
• Streaming and Suspense Boundaries
• Concurrent Features Overview

Further reading

• Suspense — react.dev
• Next.js Loading UI

Edge cases worth rehearsing

Interviewers and production incidents cluster around the same edges: first render versus update, empty and loading states, Strict Mode double setup, concurrent interruptions, and what happens when identity (key, route params, user id) changes mid-edit. Walk one concrete user journey end-to-end — open, edit, navigate away, come back — and say which state survives.

Prefer fixing data flow and ownership before reaching for memoization or micro-optimizations. Prefer event handlers over effects when a user action is the trigger. Prefer deriving values during render over mirroring props into state. Prefer stable list keys from business ids. Measure with the profiler when performance is the claim.

When you cite an API, mention one failure mode: abort on unmount, serializable props across server/client boundaries, focus restoration for dialogs, or cache invalidation after a mutation. Specific beats generic every time.

Quick self-test

Explain the concept in 60 seconds, write a minimal code sample from memory, name one footgun, and point to the primary docs. If any of those fail, reread the worked example and rebuild it in a scratch file until the model sticks under interview pressure.

Edge cases worth rehearsing

Interviewers and production incidents cluster around the same edges: first render versus update, empty and loading states, Strict Mode double setup, concurrent interruptions, and what happens when identity (key, route params, user id) changes mid-edit. Walk one concrete user journey end-to-end — open, edit, navigate away, come back — and say which state survives.

Prefer fixing data flow and ownership before reaching for memoization or micro-optimizations. Prefer event handlers over effects when a user action is the trigger. Prefer deriving values during render over mirroring props into state. Prefer stable list keys from business ids. Measure with the profiler when performance is the claim.

When you cite an API, mention one failure mode: abort on unmount, serializable props across server/client boundaries, focus restoration for dialogs, or cache invalidation after a mutation. Specific beats generic every time.

Related guides

• useCopyToClipboard HookCopy text with navigator.clipboard, fallback execCommand, transient copied state, and permissions that fail in insecure contexts.
• useDebouncedValue HookDebounce a changing value in React without firing effects on every keystroke. Cleanup, leading vs trailing, and the stale timer that updates unmounted state.
• useEventListener HookAttach a window, document, or element listener with a stable handler ref so you do not rebind on every render. Capture option and target changes.
• useFetch With AbortControllerFetch in an effect with a signal, ignore aborted errors, and prevent the slow response from winning a race after the url changes.
• useIdle HookDetect idle users: reset a timer on input events, fire idle after timeout, and decide whether mount starts the timer immediately.