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/Activity.md
+6-6Lines changed: 6 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -181,7 +181,7 @@ Changing `mode` preserves the state of the children. Removing the boundary or ch
181
181
182
182
### Preserving DOM state while content is hidden {/*restoring-the-dom-of-hidden-components*/}
183
183
184
-
Because Activity boundaries hide their children without removing them, the children's DOM is also preserved. This is useful for maintaining state held by the browser in DOM nodes.
184
+
In React DOM, an Activity boundary hides its children without removing their DOM nodes. This preserves state held by the browser in those nodes.
185
185
186
186
The Contact tab in the following example contains an uncontrolled `<textarea>`. Enter a draft, switch to the Home tab, and then return to Contact. The draft is lost because conditional rendering removes `<Contact>` and its `<textarea>` from the DOM.
187
187
@@ -345,7 +345,7 @@ Activity also preserves other browser-managed state, such as scroll position and
345
345
346
346
#### Removing the video resets its playback position {/*removing-the-video-resets-its-playback-position*/}
347
347
348
-
This version conditionally renders the active tab. Switching to Home removes the `<video>` element from the DOM, so playback starts from the beginning when you return to Video.
348
+
The following example conditionally renders the active tab. Play the video, switch to Home, return to Video, and then select **Play**. Switching to Home removes the `<video>` element from the DOM, so playback starts from the beginning.
349
349
350
350
<Sandpack>
351
351
@@ -422,7 +422,7 @@ button {
422
422
423
423
#### Hiding the video preserves its playback position {/*hiding-the-video-preserves-its-playback-position*/}
424
424
425
-
This version renders both tabs inside Activity boundaries. Switching to Home hides the `<video>` element without removing it, so playback continues from the same position when you return to Video and select **Play** again.
425
+
The following example renders both tabs inside Activity boundaries. Play the video, switch to Home, return to Video, and then select **Play**. Switching to Home hides the `<video>` element without removing it, so playback continues from the same position.
426
426
427
427
<Sandpack>
428
428
@@ -509,7 +509,7 @@ The ref provides access to the `<video>` DOM node. It does not store the playbac
509
509
510
510
### Pre-rendering content that is likely to become visible {/*pre-rendering-content-thats-likely-to-become-visible*/}
511
511
512
-
An Activity boundary can also prepare content before the user sees it. Content inside a hidden boundary renders at a lower priority without running Effects created with `useEffect` or `useLayoutEffect`. This lets the content load code and render-time data without delaying updates to visible content:
512
+
You can use an Activity boundary to prepare content before the user sees it. Content inside a hidden boundary renders at a lower priority without running Effects created with `useEffect` or `useLayoutEffect`. This lets the content load code and render-time data without delaying updates to visible content:
513
513
514
514
```js
515
515
<Suspense fallback={<Loading />}>
@@ -719,7 +719,7 @@ The data source must integrate with Suspense. For example, the component can rea
Activity boundaries also divide server-rendered pages into units that React can hydrate independently. This is related to the selective hydration behavior of [`<Suspense>`](/reference/react/Suspense), but it does not require displaying a fallback in the initial UI.
722
+
During hydration, Activity boundaries divide server-rendered pages into units that React can hydrate independently. This is related to the selective hydration behavior of [`<Suspense>`](/reference/react/Suspense), but it does not require displaying a fallback in the initial UI.
723
723
724
724
For example, without a boundary React hydrates this page as one unit:
725
725
@@ -813,7 +813,7 @@ React runs the cleanup when an enclosing Activity boundary becomes hidden. Becau
813
813
814
814
The `useLayoutEffect` cleanup runs as part of hiding the UI. A cleanup from `useEffect` can run later if, for example, a Suspense boundary suspends or a View Transition is in progress.
815
815
816
-
The video example above includes this cleanup while demonstrating that Activity preserves the `<video>` element's playback position.
816
+
The [video comparison](#examples-preserving-media-state) includes this cleanup while demonstrating that Activity preserves the `<video>` element's playback position.
0 commit comments