Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit bbe0378

Browse files
committedMar 27, 2022
Update with new thinking
1 parent 0858ff7 commit bbe0378

File tree

1 file changed

+14
-28
lines changed

1 file changed

+14
-28
lines changed
 

‎content/docs/strict-mode.md

Lines changed: 14 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -132,36 +132,21 @@ Read the [new context API documentation](/docs/context.html) to help migrate to
132132

133133
### Detecting unsafe effects {#detecting-unsafe-effects}
134134

135-
Conceptually, React effects include three phases:
136-
* The **create** phase is called for all effects when the effect is created.
137-
* The **update** phase is called when the dependencies change, if applicable.
138-
* The **destroy** phase is called for all effects when the effect is destroyed.
135+
In the future, we’d like to add a feature that allows React to add and remove sections of the UI while preserving state. For example, when a user tabs away from a screen and back, React should be able to immediately show the previous screen. To do this, React support remounting trees using the same component state used before unmounting.
139136

140-
In the past, React has only called the create phase once when a component mounts:
137+
This feature will give React better performance out-of-the-box, but requires components to be resilient to effects being mounted and destroyed multiple times. Most effects will work without any changes, but some effects do not properly clean up subscriptions in the destroy callback, or implicitly assume they are only mounted or destroyed once.
141138

142-
```
143-
* React mounts the component.
144-
* Layout effects are created.
145-
* Effect effects are created.
146-
```
139+
To help surface these issues, React 18 introduces a new development-only check to Strict Mode. This new check will automatically unmount and remount every component, whenever a component mounts for the first time, restoring the previous state on the second mount.
147140

148-
and the destroy phase once when a component unmounts:
141+
To demonstrate the development behavior you'll see in Strict Mode with this feature, consider what happens when React mounts a new component. Without this change, when a component mounts, React creates the effects:
149142

150143
```
151-
* React unmounts the component.
152-
* Layout effects are destroyed.
153-
* Effect effects are destroyed.
144+
* React mounts the component.
145+
* Layout effects are created.
146+
* Effects are created.
154147
```
155148

156-
> Note:
157-
>
158-
> It's common to hear effects being "mounted" and "unmounted". This is because effects have historically been created when a component was mounted, and destroyed when a component was unmounted. This can cause confusion, so we refer to them as "created" and "destroyed" here instead.
159-
160-
In the future, we'd like to add features to React which would allow a component to mount without immediately creating effects (such as pre-rendering), or to destroy effects in already-mounted components (such as when a component isn't visible). These features will add better performance and resource management out-of-the-box to React, but require effects to be decoupled from the component lifecycle and resilient to being created and destroyed multiple times in a component.
161-
162-
To help surface these issues, React 18 introduced Strict Effects to Strict Mode.
163-
164-
With Strict Effects, React will automatically destroy and re-create every effect in development, whenever a component mounts:
149+
With Strict Mode starting in React 18, whenever a component mounts in development, React will simulate immediately unmounting and remounting the component:
165150

166151
```
167152
* React mounts the component.
@@ -171,11 +156,13 @@ With Strict Effects, React will automatically destroy and re-create every effect
171156
* Layout effects are destroyed.
172157
* Effects are destroyed.
173158
* React simulates effects being re-created on a mounted component.
174-
* Layout effect setup code runs
159+
* Layout effects are created
175160
* Effect setup code runs
176161
```
177162

178-
when the component unmounts, effects are destroyed as normal:
163+
On the second mount, React will restore the state from the first mount. This feature simulates user behavior such as a user tabbing away from a screen and back, ensuring that code will properly handle state restoration.
164+
165+
When the component unmounts, effects are destroyed as normal:
179166

180167
```
181168
* React unmounts the component.
@@ -185,8 +172,7 @@ when the component unmounts, effects are destroyed as normal:
185172

186173
> Note:
187174
>
188-
> This only applies to development mode. _Strict Effects will not run in production mode._
175+
> This only applies to development mode, _production behavior is unchanged_.
189176
190-
For more information, see:
191-
- [Adding Strict Effects to Strict Mode](https://github.com/reactwg/react-18/discussions/19)
177+
For help supporting common issues, see:
192178
- [How to Support Strict Effects](https://github.com/reactwg/react-18/discussions/18)

0 commit comments

Comments
 (0)
Please sign in to comment.