Component · Loading
Suspense
Wait gracefully
Suspense declares a boundary: 'while children are loading, show this fallback'. It's the piece that lets components fetch data directly and lets React know what to show in the meantime.
Who suspends
Any component that reads from a resource not yet resolved: an undownloaded lazy(), a pending use(promise), or frameworks like Next/Relay that wrap their loaders.
Composition
You can nest Suspense in cascades so different regions of the UI load at their own pace, without blocking the entire screen with a single giant spinner.
Common pitfalls
- 01Suspense only catches suspending promises — not arbitrary async state (useState with loading flags still needs manual handling).
- 02Too many nested Suspense boundaries can cause waterfall loading — batch what can be batched.
- 03The fallback must be synchronous and fast to render — avoid heavy computations inside it.
Was this helpful?
Sign in to give feedback