Skip to content

Commit b64bd94

Browse files
committed
Make Activity sections self-contained
1 parent 0a7a539 commit b64bd94

1 file changed

Lines changed: 6 additions & 6 deletions

File tree

src/content/reference/react/Activity.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -181,7 +181,7 @@ Changing `mode` preserves the state of the children. Removing the boundary or ch
181181

182182
### Preserving DOM state while content is hidden {/*restoring-the-dom-of-hidden-components*/}
183183

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.
185185

186186
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.
187187

@@ -345,7 +345,7 @@ Activity also preserves other browser-managed state, such as scroll position and
345345

346346
#### Removing the video resets its playback position {/*removing-the-video-resets-its-playback-position*/}
347347

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.
349349

350350
<Sandpack>
351351

@@ -422,7 +422,7 @@ button {
422422

423423
#### Hiding the video preserves its playback position {/*hiding-the-video-preserves-its-playback-position*/}
424424

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.
426426

427427
<Sandpack>
428428

@@ -509,7 +509,7 @@ The ref provides access to the `<video>` DOM node. It does not store the playbac
509509

510510
### Pre-rendering content that is likely to become visible {/*pre-rendering-content-thats-likely-to-become-visible*/}
511511

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:
513513

514514
```js
515515
<Suspense fallback={<Loading />}>
@@ -719,7 +719,7 @@ The data source must integrate with Suspense. For example, the component can rea
719719

720720
### Improving hydration performance {/*speeding-up-interactions-during-page-load*/}
721721

722-
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.
723723

724724
For example, without a boundary React hydrates this page as one unit:
725725

@@ -813,7 +813,7 @@ React runs the cleanup when an enclosing Activity boundary becomes hidden. Becau
813813

814814
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.
815815

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.
817817

818818
---
819819

0 commit comments

Comments
 (0)