Skip to content

Commit ff8d542

Browse files
authored
Merge pull request #104 from reactjs/sync-e9a7cb1b
Sync with react.dev @ e9a7cb1
2 parents 3093178 + 1aa7aa1 commit ff8d542

File tree

1 file changed

+6
-6
lines changed

1 file changed

+6
-6
lines changed

src/content/reference/react/Activity.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ While hidden, children still re-render in response to new props, albeit at a low
4545

4646
When the boundary becomes <CodeStep step={3}>visible</CodeStep> again, React will reveal the children with their previous state restored, and re-create their Effects.
4747

48-
In this way, Activity can be thought of as a mechanism for rendering "background activity". Rather than completely discarding content that's likely to become visible again, you can use Activity to maintain and restore that content's UI and internal state, while ensuring that your hidden content has no unwanted side effects.
48+
In this way, Activity can thought of as a mechanism for rendering "background activity". Rather than completely discarding content that's likely to become visible again, you can use Activity to maintain and restore that content's UI and internal state, while ensuring hidden content has no unwanted side effects.
4949

5050
[See more examples below.](#usage)
5151

@@ -56,15 +56,15 @@ In this way, Activity can be thought of as a mechanism for rendering "background
5656

5757
#### Caveats {/*caveats*/}
5858

59-
- If an Activity is rendered inside of a [ViewTransition](/reference/react/ViewTransition), and it becomes visible as a result of an update caused by [startTransition](/reference/react/startTransition), it will activate the ViewTransition's `enter` animation. If it becomes hidden, it will activate its `exit` animation.
59+
- When used with `<ViewTransition>`, hidden activities that reveal in a transition will activate an "enter" animation. Visible Activities hidden in a transition will activate an "exit" animation.
6060

6161
---
6262

6363
## Usage {/*usage*/}
6464

6565
### Restoring the state of hidden components {/*restoring-the-state-of-hidden-components*/}
6666

67-
In React, when you want to conditionally show or hide a component, you typically mount or unmount it based on that condition:
67+
Typically in React, when you want to conditionally show or hide a component, you mount and unmount it:
6868

6969
```jsx
7070
{isShowingSidebar && (
@@ -82,11 +82,11 @@ When you hide a component using an Activity boundary instead, React will "save"
8282
</Activity>
8383
```
8484

85-
This makes it possible to hide and then later restore components in the state they were previously in.
85+
This makes it possible to restore components to their previous state.
8686

87-
The following example has a sidebar with an expandable section. You can press "Overview" to reveal the three subitems below it. The main app area also has a button that hides and shows the sidebar.
87+
The following example has a sidebar with an expandable section – you can press "Overview" to reveal the three subitems below it. The main app area also has a button that hides and shows the sidebar.
8888

89-
Try expanding the Overview section, and then toggling the sidebar closed then open:
89+
Try expanding the Overview section, then toggling the sidebar closed and open:
9090

9191
<Sandpack>
9292

0 commit comments

Comments
 (0)