Suspense
Displays a fallback while its children are loading.
Syntax
<Suspense fallback={...}>...</Suspense>Parameters
| Name | Type | Required | Description |
|---|---|---|---|
fallback | node | Yes | UI shown while suspended children are not yet ready. |
children | node | Yes | The content to render once it has loaded. |
Returns
element — A boundary that swaps in the fallback while children suspend.
Examples
<Suspense fallback={<Spinner />}>
<Profile />
</Suspense>
<Suspense fallback={<p>Loading...</p>}>
<LazyChart />
</Suspense>
Notes
Children suspend when they read a pending Promise via the use hook, are
loaded with lazy, or fetch data in a Suspense-enabled framework. Multiple
suspending children share the nearest boundary. Combine with useTransition to
avoid replacing already-shown content with the fallback.