Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

StrictMode includes strict effects by default #21418

Merged
merged 1 commit into from
May 4, 2021
Merged

StrictMode includes strict effects by default #21418

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 1 addition & 15 deletions packages/react-reconciler/src/ReactFiber.new.js
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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