Declarative loading states
Suspense lets a component suspend while it waits for data, and a surrounding boundary shows a fallback until the data is ready. Instead of tracking a loading boolean in every component, you wrap a part of the tree in a boundary that declares what to show during the wait.
- A component suspends while its data is not ready.
- The nearest boundary renders its fallback meanwhile.
- When data arrives, the real content replaces the fallback.
Coordinating multiple loads
Boundaries can nest, so you choose how granular the loading experience is. A single boundary high in the tree shows one spinner for a whole section, while inner boundaries reveal parts as each finishes. This avoids the waterfall of scattered loading flags.
- Place boundaries to group what loads together.
- Nest boundaries to reveal ready content sooner.
- The data layer must integrate with suspense to suspend.
Suspense shifts loading from imperative checks to a declarative boundary in the tree.
Key idea
Suspense lets components suspend while loading and a boundary shows a fallback, replacing scattered loading flags with a declarative boundary.