StrictMode includes strict effects by default (#21418)

Removed "unstable_level" attribute support for the time being.

Author: Brian Vaughn

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 (<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);

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 (<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);

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(
-            <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',
@@ -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>
               ,
             </>,
@@ -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',
         ]);
       });
     }