StrictMode includes strict effects by default (#21418)
Removed "unstable_level" attribute support for the time being.
Brian Vaughn committed
May 4, 2021 at 09:47 UTC
9a130e1dec268e02977bca46415dc28f332964b6
3 files changed
+7
-118
packages/react-reconciler/src/ReactFiber.new.js
+1
-15
@@ -487,21 +487,7 @@ export function createFiberFromTypeAndProps(
487
break;
488
case REACT_STRICT_MODE_TYPE:
489
fiberTag = Mode;
490
-
491
- // Legacy strict mode (<StrictMode> without any level prop) defaults to level 1.
492
- const level =
493
- pendingProps.unstable_level == null ? 1 : pendingProps.unstable_level;
494
-
495
- // Levels cascade; higher levels inherit all lower level modes.
496
- // It is explicitly not supported to lower a mode with nesting, only to increase it.
497
- if (level >= 1) {
498
- mode |= StrictLegacyMode;
499
- }
500
- if (enableStrictEffects) {
501
- if (level >= 2) {
502
- mode |= StrictEffectsMode;
503
- }
504
- }
490
+ mode |= StrictLegacyMode | StrictEffectsMode;
491
break;
492
case REACT_PROFILER_TYPE:
493
return createFiberFromProfiler(pendingProps, mode, lanes, key);
packages/react-reconciler/src/ReactFiber.old.js
+1
-15
@@ -487,21 +487,7 @@ export function createFiberFromTypeAndProps(
487
break;
488
case REACT_STRICT_MODE_TYPE:
489
fiberTag = Mode;
490
-
491
- // Legacy strict mode (<StrictMode> without any level prop) defaults to level 1.
492
- const level =
493
- pendingProps.unstable_level == null ? 1 : pendingProps.unstable_level;
494
-
495
- // Levels cascade; higher levels inherit all lower level modes.
496
- // It is explicitly not supported to lower a mode with nesting, only to increase it.
497
- if (level >= 1) {
498
- mode |= StrictLegacyMode;
499
- }
500
- if (enableStrictEffects) {
501
- if (level >= 2) {
502
- mode |= StrictEffectsMode;
503
- }
504
- }
490
+ mode |= StrictLegacyMode | StrictEffectsMode;
491
break;
492
case REACT_PROFILER_TYPE:
493
return createFiberFromProfiler(pendingProps, mode, lanes, key);
packages/react/src/__tests__/ReactStrictMode-test.internal.js
+5
-88
@@ -66,7 +66,7 @@ describe('ReactStrictMode', () => {
66
67
if (__DEV__) {
68
// @gate experimental
69
- it('should default to level 1 (legacy mode)', () => {
69
+ it('should include legacy + strict effects mode', () => {
70
act(() => {
71
const container = document.createElement('div');
72
const root = ReactDOM.createRoot(container);
@@ -77,46 +77,6 @@ describe('ReactStrictMode', () => {
77
);
78
});
79
80
- expect(log).toEqual([
81
- 'A: render',
82
- 'A: render',
83
- 'A: useLayoutEffect mount',
84
- 'A: useEffect mount',
85
- ]);
86
- });
87
-
88
- // @gate experimental
89
- it('should support level 1 (legacy mode)', () => {
90
- act(() => {
91
- const container = document.createElement('div');
92
- const root = ReactDOM.createRoot(container);
93
- root.render(
94
- <React.StrictMode unstable_level={1}>
95
- <Component label="A" />
96
- </React.StrictMode>,
97
- );
98
- });
99
-
100
- expect(log).toEqual([
101
- 'A: render',
102
- 'A: render',
103
- 'A: useLayoutEffect mount',
104
- 'A: useEffect mount',
105
- ]);
106
- });
107
-
108
- // @gate experimental
109
- it('should support level 2 (legacy + strict effects mode)', () => {
110
- act(() => {
111
- const container = document.createElement('div');
112
- const root = ReactDOM.createRoot(container);
113
- root.render(
114
- <React.StrictMode unstable_level={2}>
115
- <Component label="A" />
116
- </React.StrictMode>,
117
- );
118
- });
119
-
80
expect(log).toEqual([
81
'A: render',
82
'A: render',
@@ -137,12 +97,8 @@ describe('ReactStrictMode', () => {
97
root.render(
98
<>
99
<Component label="A" />
140
- <React.StrictMode unstable_level={1}>
141
- <Component label="B" />
142
- <React.StrictMode unstable_level={2}>
143
- <Component label="C" />
144
- </React.StrictMode>
145
- ,
100
+ <React.StrictMode>
101
+ <Component label="B" />,
102
</React.StrictMode>
103
,
104
</>,
@@ -153,53 +109,14 @@ describe('ReactStrictMode', () => {
109
'A: render',
110
'B: render',
111
'B: render',
156
- 'C: render',
157
- 'C: render',
112
'A: useLayoutEffect mount',
113
'B: useLayoutEffect mount',
160
- 'C: useLayoutEffect mount',
114
'A: useEffect mount',
115
'B: useEffect mount',
163
- 'C: useEffect mount',
164
- 'C: useLayoutEffect unmount',
165
- 'C: useEffect unmount',
166
- 'C: useLayoutEffect mount',
167
- 'C: useEffect mount',
168
- ]);
169
- });
170
-
171
- // @gate experimental
172
- it('should not allow level to be decreased with nesting', () => {
173
- act(() => {
174
- const container = document.createElement('div');
175
- const root = ReactDOM.createRoot(container);
176
- root.render(
177
- <>
178
- <Component label="A" />
179
- <React.StrictMode unstable_level={1}>
180
- <Component label="B" />
181
- <React.StrictMode unstable_level={0}>
182
- <Component label="C" />
183
- </React.StrictMode>
184
- ,
185
- </React.StrictMode>
186
- ,
187
- </>,
188
- );
189
- });
190
-
191
- expect(log).toEqual([
192
- 'A: render',
193
- 'B: render',
194
- 'B: render',
195
- 'C: render',
196
- 'C: render',
197
- 'A: useLayoutEffect mount',
116
+ 'B: useLayoutEffect unmount',
117
+ 'B: useEffect unmount',
118
'B: useLayoutEffect mount',
199
- 'C: useLayoutEffect mount',
200
- 'A: useEffect mount',
119
'B: useEffect mount',
202
- 'C: useEffect mount',
120
]);
121
});
122
}