You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/reference/react/Suspense.md
+4-3Lines changed: 4 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -32,6 +32,7 @@ title: <Suspense>
32
32
- 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)
33
33
- 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.
34
34
- 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.
35
36
- 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.
36
37
- 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.
37
38
@@ -208,7 +209,7 @@ async function getAlbums() {
208
209
209
210
### What activates a Suspense boundary {/*what-activates-a-suspense-boundary*/}
210
211
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:
212
213
213
214
- Lazy-loading component code with [`lazy`](/reference/react/lazy).
214
215
- 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
222
223
223
224
#### What is a Suspense-enabled framework? {/*what-is-a-suspense-enabled-framework*/}
224
225
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.
226
227
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)
0 commit comments