suspense-patterns
Concept of the skill
What it is: React Suspense boundary design: deciding which subtree waits, which fallback appears, and which content reveals together or progressively when code, data, or a Server Component render suspends.
Mental model: Suspense is boundary-based coordination, not component-local isLoading state. A Suspense-enabled data source, lazy component, use(promise) call, or async server render suspends; the nearest Suspense boundary chooses the placeholder and reveal grouping.
Why it exists: Loading states become brittle when every component owns its own spinner. Suspense moves the loading decision up the tree, so product hierarchy controls the loading sequence and the component that needs data can read as if the data is ready.
What it is NOT: Not general rendering-strategy selection, not Server Component placement, not ordinary hook dependency design, not non-React streaming transport design, and not standalone error-boundary design.
Adjacent concepts: Error boundaries, React transitions, deferred values, React.lazy, React 19 use, Server Components, streaming server rendering, Next.js route-segment loading UI, partial prerendering, selective hydration.
One-line analogy: Suspense boundaries are theater curtains: the performer signals "not ready," and the curtain decides what the audience sees until that part of the stage is ready.
Common misconception: Suspense does not make every async fetch suspend automatically. It only responds to Suspense-enabled sources; data fetched in an Effect or event handler still needs local state or a framework/library that integrates with Suspense.