Skip to content

Commit

Permalink
StrictMode includes strict effects by default (facebook#21418)
Browse files Browse the repository at this point in the history
Removed "unstable_level" attribute support for the time being.
  • Loading branch information
Brian Vaughn authored and koto committed Jun 15, 2021
1 parent 17b2988 commit 21922b8
Show file tree
Hide file tree
Showing 3 changed files with 7 additions and 118 deletions.
16 changes: 1 addition & 15 deletions packages/react-reconciler/src/ReactFiber.new.js
Original file line number Diff line number Diff line change
Expand Up @@ -487,21 +487,7 @@ export function createFiberFromTypeAndProps(
break;
case REACT_STRICT_MODE_TYPE:
fiberTag = Mode;

// Legacy strict mode (<StrictMode> without any level prop) defaults to level 1.
const level =
pendingProps.unstable_level == null ? 1 : pendingProps.unstable_level;

// Levels cascade; higher levels inherit all lower level modes.
// It is explicitly not supported to lower a mode with nesting, only to increase it.
if (level >= 1) {
mode |= StrictLegacyMode;
}
if (enableStrictEffects) {
if (level >= 2) {
mode |= StrictEffectsMode;
}
}
mode |= StrictLegacyMode | StrictEffectsMode;
break;
case REACT_PROFILER_TYPE:
return createFiberFromProfiler(pendingProps, mode, lanes, key);
Expand Down
16 changes: 1 addition & 15 deletions packages/react-reconciler/src/ReactFiber.old.js
Original file line number Diff line number Diff line change
Expand Up @@ -487,21 +487,7 @@ export function createFiberFromTypeAndProps(
break;
case REACT_STRICT_MODE_TYPE:
fiberTag = Mode;

// Legacy strict mode (<StrictMode> without any level prop) defaults to level 1.
const level =
pendingProps.unstable_level == null ? 1 : pendingProps.unstable_level;

// Levels cascade; higher levels inherit all lower level modes.
// It is explicitly not supported to lower a mode with nesting, only to increase it.
if (level >= 1) {
mode |= StrictLegacyMode;
}
if (enableStrictEffects) {
if (level >= 2) {
mode |= StrictEffectsMode;
}
}
mode |= StrictLegacyMode | StrictEffectsMode;
break;
case REACT_PROFILER_TYPE:
return createFiberFromProfiler(pendingProps, mode, lanes, key);
Expand Down
93 changes: 5 additions & 88 deletions packages/react/src/__tests__/ReactStrictMode-test.internal.js
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ describe('ReactStrictMode', () => {

if (__DEV__) {
// @gate experimental
it('should default to level 1 (legacy mode)', () => {
it('should include legacy + strict effects mode', () => {
act(() => {
const container = document.createElement('div');
const root = ReactDOM.createRoot(container);
Expand All @@ -77,46 +77,6 @@ describe('ReactStrictMode', () => {
);
});

expect(log).toEqual([
'A: render',
'A: render',
'A: useLayoutEffect mount',
'A: useEffect mount',
]);
});

// @gate experimental
it('should support level 1 (legacy mode)', () => {
act(() => {
const container = document.createElement('div');
const root = ReactDOM.createRoot(container);
root.render(
<React.StrictMode unstable_level={1}>
<Component label="A" />
</React.StrictMode>,
);
});

expect(log).toEqual([
'A: render',
'A: render',
'A: useLayoutEffect mount',
'A: useEffect mount',
]);
});

// @gate experimental
it('should support level 2 (legacy + strict effects mode)', () => {
act(() => {
const container = document.createElement('div');
const root = ReactDOM.createRoot(container);
root.render(
<React.StrictMode unstable_level={2}>
<Component label="A" />
</React.StrictMode>,
);
});

expect(log).toEqual([
'A: render',
'A: render',
Expand All @@ -137,12 +97,8 @@ describe('ReactStrictMode', () => {
root.render(
<>
<Component label="A" />
<React.StrictMode unstable_level={1}>
<Component label="B" />
<React.StrictMode unstable_level={2}>
<Component label="C" />
</React.StrictMode>
,
<React.StrictMode>
<Component label="B" />,
</React.StrictMode>
,
</>,
Expand All @@ -153,53 +109,14 @@ describe('ReactStrictMode', () => {
'A: render',
'B: render',
'B: render',
'C: render',
'C: render',
'A: useLayoutEffect mount',
'B: useLayoutEffect mount',
'C: useLayoutEffect mount',
'A: useEffect mount',
'B: useEffect mount',
'C: useEffect mount',
'C: useLayoutEffect unmount',
'C: useEffect unmount',
'C: useLayoutEffect mount',
'C: useEffect mount',
]);
});

// @gate experimental
it('should not allow level to be decreased with nesting', () => {
act(() => {
const container = document.createElement('div');
const root = ReactDOM.createRoot(container);
root.render(
<>
<Component label="A" />
<React.StrictMode unstable_level={1}>
<Component label="B" />
<React.StrictMode unstable_level={0}>
<Component label="C" />
</React.StrictMode>
,
</React.StrictMode>
,
</>,
);
});

expect(log).toEqual([
'A: render',
'B: render',
'B: render',
'C: render',
'C: render',
'A: useLayoutEffect mount',
'B: useLayoutEffect unmount',
'B: useEffect unmount',
'B: useLayoutEffect mount',
'C: useLayoutEffect mount',
'A: useEffect mount',
'B: useEffect mount',
'C: useEffect mount',
]);
});
}
Expand Down

0 comments on commit 21922b8

Please sign in to comment.