Add an option in StrictMode to disable double useEffect in legacy strict mode

Author: tyao1

packages/react-reconciler/src/ReactFiber.js

@@ -87,6 +87,7 @@ import {
   StrictLegacyMode,
   StrictEffectsMode,
   ConcurrentUpdatesByDefaultMode,
+  NoStrictPassiveEffectsMode,
 } from './ReactTypeOfMode';
 import {
   REACT_FORWARD_REF_TYPE,
@@ -539,6 +540,9 @@ export function createFiberFromTypeAndProps(
         if ((mode & ConcurrentMode) !== NoMode) {
           // Strict effects should never run on legacy roots
           mode |= StrictEffectsMode;
+          if (pendingProps.unstable_disableStrictPassiveEffect) {
+            mode |= NoStrictPassiveEffectsMode;
+          }
         }
         break;
       case REACT_PROFILER_TYPE:
@@ -752,6 +756,10 @@ export function createFiberFromOffscreen(
   lanes: Lanes,
   key: null | string,
 ): Fiber {
+  if (__DEV__) {
+    // StrictMode in Offscreen should always run double passive effects
+    mode &= ~NoStrictPassiveEffectsMode;
+  }
   const fiber = createFiber(OffscreenComponent, pendingProps, key, mode);
   fiber.elementType = REACT_OFFSCREEN_TYPE;
   fiber.lanes = lanes;

packages/react-reconciler/src/ReactFiberHooks.js

@@ -58,6 +58,7 @@ import {
   DebugTracingMode,
   StrictEffectsMode,
   StrictLegacyMode,
+  NoStrictPassiveEffectsMode,
 } from './ReactTypeOfMode';
 import {
   NoLane,
@@ -2257,7 +2258,8 @@ function mountEffect(
 ): void {
   if (
     __DEV__ &&
-    (currentlyRenderingFiber.mode & StrictEffectsMode) !== NoMode
+    (currentlyRenderingFiber.mode & StrictEffectsMode) !== NoMode &&
+    (currentlyRenderingFiber.mode & NoStrictPassiveEffectsMode) === NoMode
   ) {
     mountEffectImpl(
       MountPassiveDevEffect | PassiveEffect | PassiveStaticEffect,

packages/react-reconciler/src/ReactTypeOfMode.js

@@ -9,11 +9,12 @@
 
 export type TypeOfMode = number;
 
-export const NoMode = /*                         */ 0b000000;
+export const NoMode = /*                         */ 0b0000000;
 // TODO: Remove ConcurrentMode by reading from the root tag instead
-export const ConcurrentMode = /*                 */ 0b000001;
-export const ProfileMode = /*                    */ 0b000010;
-export const DebugTracingMode = /*               */ 0b000100;
-export const StrictLegacyMode = /*               */ 0b001000;
-export const StrictEffectsMode = /*              */ 0b010000;
-export const ConcurrentUpdatesByDefaultMode = /* */ 0b100000;
+export const ConcurrentMode = /*                 */ 0b0000001;
+export const ProfileMode = /*                    */ 0b0000010;
+export const DebugTracingMode = /*               */ 0b0000100;
+export const StrictLegacyMode = /*               */ 0b0001000;
+export const StrictEffectsMode = /*              */ 0b0010000;
+export const ConcurrentUpdatesByDefaultMode = /* */ 0b0100000;
+export const NoStrictPassiveEffectsMode = /*     */ 0b1000000;

packages/react-reconciler/src/__tests__/ReactOffscreenStrictMode-test.js

@@ -55,6 +55,30 @@ describe('ReactOffscreenStrictMode', () => {
     ]);
   });
 
+  // @gate __DEV__ && enableOffscreen
+  it('should trigger strict effects when disableStrictPassiveEffect is presented on StrictMode', async () => {
+    await act(() => {
+      ReactNoop.render(
+        <React.StrictMode unstable_disableStrictPassiveEffect={true}>
+          <Offscreen>
+            <Component label="A" />
+          </Offscreen>
+        </React.StrictMode>,
+      );
+    });
+
+    expect(log).toEqual([
+      'A: render',
+      'A: render',
+      'A: useLayoutEffect mount',
+      'A: useEffect mount',
+      'A: useLayoutEffect unmount',
+      'A: useEffect unmount',
+      'A: useLayoutEffect mount',
+      'A: useEffect mount',
+    ]);
+  });
+
   // @gate __DEV__ && enableOffscreen && useModernStrictMode
   it('should not trigger strict effects when offscreen is hidden', async () => {
     await act(() => {

packages/react/src/__tests__/ReactStrictMode-test.internal.js

@@ -104,6 +104,27 @@ describe('ReactStrictMode', () => {
         ]);
       });
 
+      it('should include legacy + strict effects mode, but not strict passive effect with disableStrictPassiveEffect', async () => {
+        await act(() => {
+          const container = document.createElement('div');
+          const root = ReactDOMClient.createRoot(container);
+          root.render(
+            <React.StrictMode unstable_disableStrictPassiveEffect={true}>
+              <Component label="A" />
+            </React.StrictMode>,
+          );
+        });
+
+        expect(log).toEqual([
+          'A: render',
+          'A: render',
+          'A: useLayoutEffect mount',
+          'A: useEffect mount',
+          'A: useLayoutEffect unmount',
+          'A: useLayoutEffect mount',
+        ]);
+      });
+
       it('should allow level to be increased with nesting', async () => {
         await act(() => {
           const container = document.createElement('div');