Data Fetching with Suspense

Suspense-compatible data sources can pause a component subtree while required asynchronous data is pending, allowing React to render an appropriate fallback and retry when the data becomes available. It is a rendering coordination mechanism, not a general-purpose data-fetching library.

In React, Suspense coordinates rendering around asynchronous dependencies. When a component reads from a Suspense-enabled data source and that data is not ready, the component can suspend; React can then render the nearest `<Suspense>` fallback instead of committing incomplete UI for that subtree.

The important distinction is between Suspense and the mechanism that retrieves data. Suspense does not by itself define how requests are made, cached, deduplicated, or invalidated. A framework or data library supplies a Suspense-compatible resource, while React handles the rendering behavior around its pending state.

With concurrent rendering, React can prepare UI without immediately committing it. When a suspended dependency resolves, React retries the affected rendering work and may commit the completed subtree. This lets loading states be scoped to meaningful UI boundaries rather than forcing an entire application to display one global loading indicator.

A senior engineer should also understand that Suspense boundaries are architectural decisions. Boundary placement affects what remains visible during loading, how much UI is replaced by a fallback, and how independently loading regions coordinate. Server rendering and streaming can use Suspense boundaries as well, but the exact APIs and data-fetching integrations depend on the React version and framework.

Key points

• Suspense coordinates rendering around pending asynchronous dependencies; it does not itself fetch data.
• A Suspense-enabled resource must integrate with React's suspension mechanism; an arbitrary `fetch()` call does not automatically suspend rendering.
• The nearest Suspense boundary controls which subtree displays its fallback.
• When suspended work becomes ready, React can retry rendering and commit the completed result.
• Boundary placement affects loading UX, concurrency, and streaming behavior.

Interview questions

What does it mean for a component to suspend?

A component suspends when rendering encounters a pending asynchronous dependency through a Suspense-compatible mechanism. React does not commit that incomplete subtree at that point. Instead, the nearest Suspense boundary can render its fallback. Once the dependency is ready, React retries the suspended rendering work.

Does Suspense fetch data for you?

No. Suspense provides a rendering mechanism for asynchronous dependencies, but it does not define the request, cache, retry, or invalidation strategy. A framework or library must expose data in a Suspense-compatible way. This separation lets different data layers integrate with the same React rendering primitive.

How does Suspense relate to concurrent rendering?

Concurrent rendering allows React to prepare rendering work without immediately committing it. If part of that work suspends, React can keep coordinating other work and show a fallback at the relevant boundary. When the dependency resolves, React can retry the suspended work and commit a ready result. The key benefit is that asynchronous readiness becomes part of React's rendering scheduling rather than requiring every component to imperatively manage an independent loading transition.

How would you design Suspense boundaries for a complex page?

I would place boundaries around meaningful independently loadable regions rather than wrapping the entire application indiscriminately. The boundary should preserve useful surrounding UI while a specific region waits for its dependencies. I would also consider whether showing a fallback causes layout shifts or hides information that users already have. For server-rendered applications, I would evaluate the same boundaries in terms of streaming and progressive delivery.

What happens when a Suspense-enabled data request fails instead of resolving?

Suspense is concerned with pending work, while failures are handled through React's error-handling mechanisms. A Suspense-compatible resource can expose a rejected operation by throwing an error during rendering. An appropriate Error Boundary can then render an error state. In a production system, the data layer should also define how retries and recovery interact with its cache and request lifecycle.