Skip to content

Commit d34d3ce

Browse files
committed
fix: clarify Suspense boundary activation and fallback behavior
1 parent 14e8f67 commit d34d3ce

1 file changed

Lines changed: 4 additions & 3 deletions

File tree

src/content/reference/react/Suspense.md

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ title: <Suspense>
3232
- Suspense does not detect when data is fetched inside an Effect or event handler. It only activates for the [resources listed below.](#what-activates-a-suspense-boundary)
3333
- React does not preserve any state for renders that got suspended before they were able to mount for the first time. When the component has loaded, React will retry rendering the suspended tree from scratch.
3434
- If Suspense was displaying content for the tree, but then it suspended again, the `fallback` will be shown again unless the update causing it was caused by [`startTransition`](/reference/react/startTransition) or [`useDeferredValue`](/reference/react/useDeferredValue).
35+
- Once React shows a `fallback`, it keeps it visible for at least ~300ms, revealing any boundaries that resolve within that window together to reduce flicker during [streaming server rendering](/reference/react-dom/server). A boundary whose content is ready before its `fallback` is committed skips the `fallback` entirely.
3536
- If React needs to hide the already visible content because it suspended again, it will clean up [layout Effects](/reference/react/useLayoutEffect) in the content tree. When the content is ready to be shown again, React will fire the layout Effects again. This ensures that Effects measuring the DOM layout don't try to do this while the content is hidden.
3637
- React includes under-the-hood optimizations like *Streaming Server Rendering* and *Selective Hydration* that are integrated with Suspense. Read [an architectural overview](https://github.com/reactwg/react-18/discussions/37) and watch [a technical talk](https://www.youtube.com/watch?v=pj5N-Khihgc) to learn more.
3738

@@ -208,7 +209,7 @@ async function getAlbums() {
208209

209210
### What activates a Suspense boundary {/*what-activates-a-suspense-boundary*/}
210211

211-
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:
212+
A Suspense boundary waits for its content to be ready before revealing it. Any of the following blocks a boundary's content from being revealed:
212213

213214
- Lazy-loading component code with [`lazy`](/reference/react/lazy).
214215
- 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/).
@@ -222,9 +223,9 @@ A Suspense boundary displays its `fallback` while its content is loading, and it
222223

223224
#### What is a Suspense-enabled framework? {/*what-is-a-suspense-enabled-framework*/}
224225

225-
A *Suspense-enabled framework* integrates data fetching with Suspense, so that reading data in a component activates the nearest boundary. The exact way you load data in the `Albums` component above depends on your framework, and you'll find the details in its data fetching documentation.
226+
A *Suspense-enabled framework* reads data with [`use`](/reference/react/use) under the hood, so that reading data in a component activates the nearest boundary. The exact way you load data in the `Albums` component above depends on your framework, and you'll find the details in its data fetching documentation.
226227

227-
Without a framework, you can read a Promise with [`use`](/reference/react/use) as long as the Promise is [cached so the same instance is reused across renders.](/reference/react/use#caching-promises-for-client-components)
228+
Without a framework, you can read a Promise with `use` directly, as long as the Promise is [cached so the same instance is reused across renders.](/reference/react/use#caching-promises-for-client-components)
228229

229230
</Note>
230231

0 commit comments

Comments
 (0)