Skip to content

Commit 0f92fef

Browse files
committed
[Suspense] Add 'What activates a Suspense boundary' section
1 parent 93f6c27 commit 0f92fef

1 file changed

Lines changed: 14 additions & 6 deletions

File tree

src/content/reference/react/Suspense.md

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -203,17 +203,25 @@ async function getAlbums() {
203203

204204
</Sandpack>
205205

206-
<Note>
206+
---
207+
208+
### What activates a Suspense boundary {/*what-activates-a-suspense-boundary*/}
207209

208-
**Only Suspense-enabled data sources will activate the Suspense component.** They include:
210+
A Suspense boundary displays its `fallback` while its content is loading, and it can also wait on other resources before revealing that content. The following activate a boundary:
209211

210-
- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming#streaming-with-suspense)
211-
- Lazy-loading component code with [`lazy`](/reference/react/lazy)
212-
- Reading the value of a cached Promise with [`use`](/reference/react/use)
212+
- Lazy-loading component code with [`lazy`](/reference/react/lazy).
213+
- Reading a Promise with [`use`](/reference/react/use), including data streamed from [Server Components](/reference/rsc/server-components) and integrations from frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/).
214+
- Loading a stylesheet rendered with [`<link rel="stylesheet">` and a `precedence` prop.](/reference/react-dom/components/link#special-rendering-behavior) React blocks the boundary until the stylesheet loads, up to a timeout.
215+
- Loading fonts. React blocks a streamed boundary until [`document.fonts.ready`](https://developer.mozilla.org/en-US/docs/Web/API/FontFaceSet/ready) resolves, up to a timeout. Fonts also block a [`<ViewTransition>`](/reference/react/ViewTransition) update.
216+
- Streaming a large boundary's HTML during server rendering. React reveals the content as the HTML arrives.
217+
- Loading an image, where `img.src` blocks the boundary until the source loads. This behavior is not enabled by default. An `<img onLoad>` handler opts out, and images in a [`<ViewTransition>`](/reference/react/ViewTransition) update opt in automatically.
218+
- <ExperimentalBadge /> Performing CPU-bound render work inside a `<Suspense>` boundary marked with the `defer` prop.
219+
220+
<Note>
213221

214222
Suspense **does not** detect when data is fetched inside an Effect or event handler.
215223

216-
The exact way you would load data in the `Albums` component above depends on your framework. If you use a Suspense-enabled framework, you'll find the details in its data fetching documentation.
224+
The exact way you would load data in the `Albums` component above depends on your framework. If you use a framework with built-in Suspense support, you'll find the details in its data fetching documentation.
217225

218226
Suspense-enabled data fetching without the use of an opinionated framework is not yet supported. The requirements for implementing a Suspense-enabled data source are unstable and undocumented. An official API for integrating data sources with Suspense will be released in a future version of React.
219227

0 commit comments

Comments
 (0)