Detailed explanation
Suspense is a React component that defines a loading boundary around part of the UI. When a descendant cannot finish rendering because a supported resource is not ready, React can show the boundary’s fallback instead. In <Suspense fallback={<Skeleton />}><Profile userId={id} /></Suspense>, the skeleton appears only if Profile or one of its descendants actually suspends. Suspense makes loading behaviour structural: the component tree describes which content should wait together and what users should see while waiting.
Under the hood, a Suspense-enabled resource signals during rendering that it is pending using a Promise-like value. React handles that signal at the nearest Suspense boundary, renders the fallback when appropriate, and retries rendering when the resource becomes ready. A common use is code splitting with React.lazy, which loads a component through a dynamic import. Suspense also works with data sources provided by Suspense-enabled frameworks or libraries. In React 19, use can read a supported, cached Promise during rendering and suspend while it is pending; creating a fresh Promise on every render is not a reliable integration pattern.
Importantly, Suspense does not fetch data itself, and it does not automatically detect requests started inside useEffect or event handlers. A component that fetches data in an effect and tracks an isLoading flag still needs its own loading logic unless it adopts a Suspense-compatible data source. Suspense also does not replace an Error Boundary: pending work is handled by Suspense, while rendering errors, including rejected lazy imports, should be handled by an Error Boundary.
Boundary placement controls the loading experience. One boundary can reveal a section together, while nested boundaries allow slower sections to reveal independently. If already visible content suspends again, React may replace it with the fallback; updates marked with startTransition or values deferred with useDeferredValue can help keep existing content visible. Interviewers look for this distinction between coordinating rendering and performing asynchronous work, along with practical judgement about boundary placement and avoiding unnecessary full-page loading screens.
Key points to remember
- Suspense shows a fallback when a descendant suspends during rendering.
- React.lazy uses Suspense to coordinate loading dynamically imported components.
- Data fetching requires a Suspense-compatible integration; ordinary effect-based requests do not trigger it.
- Nested boundaries let different sections reveal independently; Error Boundaries handle failures separately.
- Transitions and deferred values can preserve already visible content when an update suspends.
Common mistakes candidates make
- Assuming wrapping any asynchronous component or effect-based fetch in Suspense automatically enables its fallback.
- Treating Suspense as a data-fetching API or expecting it to display error UI for failed requests.
- Placing a single boundary around the entire application when smaller boundaries would preserve useful visible content.
Likely follow-up questions
How does Suspense work with React.lazy?
React.lazy creates a component whose code is loaded through a dynamic import when React first attempts to render it. While that import is pending, the nearest Suspense boundary can display its fallback; the standard lazy pattern expects a default component export.
How is Suspense different from an Error Boundary?
Suspense handles pending resources that prevent rendering from completing. An Error Boundary handles rendering failures, so applications often use both to provide separate loading and error experiences.
Does Suspense preserve component state while loading?
React does not preserve state for a tree that suspends before its first successful mount; it retries that render from scratch. Already mounted content can retain its state when hidden by a fallback, although React cleans up its layout effects and runs them again when the content becomes visible.
Interview tip: Start with the loading-boundary definition, explain the Profile example, and explicitly distinguish Suspense-compatible resources from ordinary useEffect fetching.