Suspense Boundaries
Suspense lets a component tree declare a fallback while some child work is not ready under a supported Suspense-enabled mechanism. A boundary defines a user-visible loading region.
Good boundaries correspond to meaningful chunks of UI. A single application-wide spinner can hide useful content and make the interface feel blocked. Too many tiny boundaries can create distracting loading transitions.
Suspense is a coordination mechanism; it does not mean every asynchronous operation can automatically be placed inside a component and awaited.
Suspense boundary
<Suspense fallback={<ProfileSkeleton />}>
<ProfilePanel />
</Suspense>💡 The fallback is scoped to the ProfilePanel subtree rather than blocking unrelated application UI.
Key Takeaways
- Choose boundaries around meaningful UI regions.
- Fallbacks should preserve layout where possible.
- Suspense support depends on the data/loading mechanism being used.