From 9a130e1dec268e02977bca46415dc28f332964b6 Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Tue, 4 May 2021 09:47:06 -0400 Subject: [PATCH] StrictMode includes strict effects by default (#21418) Removed "unstable_level" attribute support for the time being. --- .../react-reconciler/src/ReactFiber.new.js | 16 +--- .../react-reconciler/src/ReactFiber.old.js | 16 +--- .../ReactStrictMode-test.internal.js | 93 +------------------ 3 files changed, 7 insertions(+), 118 deletions(-) diff --git a/packages/react-reconciler/src/ReactFiber.new.js b/packages/react-reconciler/src/ReactFiber.new.js index fcb757b96a651..13cbe26b5acc4 100644 --- a/packages/react-reconciler/src/ReactFiber.new.js +++ b/packages/react-reconciler/src/ReactFiber.new.js @@ -487,21 +487,7 @@ export function createFiberFromTypeAndProps( break; case REACT_STRICT_MODE_TYPE: fiberTag = Mode; - - // Legacy strict mode ( 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); diff --git a/packages/react-reconciler/src/ReactFiber.old.js b/packages/react-reconciler/src/ReactFiber.old.js index 50947ff94c8a1..40a09820beae4 100644 --- a/packages/react-reconciler/src/ReactFiber.old.js +++ b/packages/react-reconciler/src/ReactFiber.old.js @@ -487,21 +487,7 @@ export function createFiberFromTypeAndProps( break; case REACT_STRICT_MODE_TYPE: fiberTag = Mode; - - // Legacy strict mode ( 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); diff --git a/packages/react/src/__tests__/ReactStrictMode-test.internal.js b/packages/react/src/__tests__/ReactStrictMode-test.internal.js index 351ce098ef29b..ca651fdefaf29 100644 --- a/packages/react/src/__tests__/ReactStrictMode-test.internal.js +++ b/packages/react/src/__tests__/ReactStrictMode-test.internal.js @@ -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); @@ -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( - - - , - ); - }); - - 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( - - - , - ); - }); - expect(log).toEqual([ 'A: render', 'A: render', @@ -137,12 +97,8 @@ describe('ReactStrictMode', () => { root.render( <> - - - - - - , + + , , , @@ -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( - <> - - - - - - - , - - , - , - ); - }); - - 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', ]); }); }