What Suspense is for
Suspense lets a component wait for something before rendering and declaratively show a fallback in the meantime. A component suspends by throwing a promise, and the nearest Suspense boundary catches it.
- A boundary takes a fallback prop shown while children suspend
- Use it for lazy loaded components and Suspense ready data sources
- When the promise resolves React retries the render
Placing boundaries
Where you put boundaries shapes the loading experience. A boundary high in the tree shows one big spinner, while several smaller boundaries reveal content progressively.
- Group content that should appear together under one boundary
- Use nested boundaries to stream sections as they become ready
- Avoid wrapping every node, which causes a flicker of many spinners
Suspense flow
Key idea
A Suspense boundary catches suspending children and shows a fallback until their async work resolves, so place boundaries to group related content and reveal the rest of the page progressively.