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
* 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.
139
136
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.
141
138
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.
147
140
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:
149
142
150
143
```
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.
154
147
```
155
148
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:
165
150
166
151
```
167
152
* React mounts the component.
@@ -171,11 +156,13 @@ With Strict Effects, React will automatically destroy and re-create every effect
171
156
* Layout effects are destroyed.
172
157
* Effects are destroyed.
173
158
* React simulates effects being re-created on a mounted component.
174
-
* Layout effect setup code runs
159
+
* Layout effects are created
175
160
* Effect setup code runs
176
161
```
177
162
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:
179
166
180
167
```
181
168
* React unmounts the component.
@@ -185,8 +172,7 @@ when the component unmounts, effects are destroyed as normal:
185
172
186
173
> Note:
187
174
>
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_.
189
176
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:
192
178
-[How to Support Strict Effects](https://github.com/reactwg/react-18/discussions/18)
0 commit comments