Split strict effects mode into two flags

One flag ('enableStrictEffects') enables strict mode level 2. It is similar to 'debugRenderPhaseSideEffectsForStrictMode' which enables srtict mode level 1.

The second flag ('createRootStrictEffectsByDefault') controls the default strict mode level for 'createRoot' trees. For now, all 'createRoot' trees remain level 1 by default. We will experiment with level 2 within Facebook.

This is a prerequisite for adding a configurable option to 'createRoot' that enables choosing a different StrictMode level than the default.

packages/react-reconciler/src/ReactFiber.new.js

@@ -19,8 +19,9 @@ import type {OffscreenProps} from './ReactFiberOffscreenComponent';
 
 import invariant from 'shared/invariant';
 import {
+  createRootStrictEffectsByDefault,
   enableCache,
-  enableDoubleInvokingEffects,
+  enableStrictEffects,
   enableProfilerTimer,
   enableScopeAPI,
 } from 'shared/ReactFeatureFlags';
@@ -423,14 +424,14 @@ export function resetWorkInProgress(workInProgress: Fiber, renderLanes: Lanes) {
 export function createHostRootFiber(tag: RootTag): Fiber {
   let mode;
   if (tag === ConcurrentRoot) {
-    if (enableDoubleInvokingEffects) {
+    if (enableStrictEffects && createRootStrictEffectsByDefault) {
       mode =
         ConcurrentMode | BlockingMode | StrictLegacyMode | StrictEffectsMode;
     } else {
       mode = ConcurrentMode | BlockingMode | StrictLegacyMode;
     }
   } else if (tag === BlockingRoot) {
-    if (enableDoubleInvokingEffects) {
+    if (enableStrictEffects && createRootStrictEffectsByDefault) {
       mode = BlockingMode | StrictLegacyMode | StrictEffectsMode;
     } else {
       mode = BlockingMode | StrictLegacyMode;

packages/react-reconciler/src/ReactFiber.old.js

@@ -19,8 +19,9 @@ import type {OffscreenProps} from './ReactFiberOffscreenComponent';
 
 import invariant from 'shared/invariant';
 import {
+  createRootStrictEffectsByDefault,
   enableCache,
-  enableDoubleInvokingEffects,
+  enableStrictEffects,
   enableProfilerTimer,
   enableScopeAPI,
 } from 'shared/ReactFeatureFlags';
@@ -423,14 +424,14 @@ export function resetWorkInProgress(workInProgress: Fiber, renderLanes: Lanes) {
 export function createHostRootFiber(tag: RootTag): Fiber {
   let mode;
   if (tag === ConcurrentRoot) {
-    if (enableDoubleInvokingEffects) {
+    if (enableStrictEffects && createRootStrictEffectsByDefault) {
       mode =
         ConcurrentMode | BlockingMode | StrictLegacyMode | StrictEffectsMode;
     } else {
       mode = ConcurrentMode | BlockingMode | StrictLegacyMode;
     }
   } else if (tag === BlockingRoot) {
-    if (enableDoubleInvokingEffects) {
+    if (enableStrictEffects && createRootStrictEffectsByDefault) {
       mode = BlockingMode | StrictLegacyMode | StrictEffectsMode;
     } else {
       mode = BlockingMode | StrictLegacyMode;

packages/react-reconciler/src/ReactFiberClassComponent.new.js

@@ -19,7 +19,7 @@ import {
   enableDebugTracing,
   enableSchedulingProfiler,
   warnAboutDeprecatedLifecycles,
-  enableDoubleInvokingEffects,
+  enableStrictEffects,
 } from 'shared/ReactFeatureFlags';
 import ReactStrictModeWarnings from './ReactStrictModeWarnings.new';
 import {isMounted} from './ReactFiberTreeReflection';
@@ -908,7 +908,7 @@ function mountClassInstance(
   if (typeof instance.componentDidMount === 'function') {
     if (
       __DEV__ &&
-      enableDoubleInvokingEffects &&
+      enableStrictEffects &&
       (workInProgress.mode & StrictEffectsMode) !== NoMode
     ) {
       // Never double-invoke effects for legacy roots.
@@ -987,7 +987,7 @@ function resumeMountClassInstance(
     if (typeof instance.componentDidMount === 'function') {
       if (
         __DEV__ &&
-        enableDoubleInvokingEffects &&
+        enableStrictEffects &&
         (workInProgress.mode & StrictEffectsMode) !== NoMode
       ) {
         // Never double-invoke effects for legacy roots.
@@ -1039,7 +1039,7 @@ function resumeMountClassInstance(
     if (typeof instance.componentDidMount === 'function') {
       if (
         __DEV__ &&
-        enableDoubleInvokingEffects &&
+        enableStrictEffects &&
         (workInProgress.mode & StrictEffectsMode) !== NoMode
       ) {
         // Never double-invoke effects for legacy roots.
@@ -1054,7 +1054,7 @@ function resumeMountClassInstance(
     if (typeof instance.componentDidMount === 'function') {
       if (
         __DEV__ &&
-        enableDoubleInvokingEffects &&
+        enableStrictEffects &&
         (workInProgress.mode & StrictEffectsMode) !== NoMode
       ) {
         // Never double-invoke effects for legacy roots.

packages/react-reconciler/src/ReactFiberClassComponent.old.js

@@ -19,7 +19,7 @@ import {
   enableDebugTracing,
   enableSchedulingProfiler,
   warnAboutDeprecatedLifecycles,
-  enableDoubleInvokingEffects,
+  enableStrictEffects,
 } from 'shared/ReactFeatureFlags';
 import ReactStrictModeWarnings from './ReactStrictModeWarnings.old';
 import {isMounted} from './ReactFiberTreeReflection';
@@ -908,7 +908,7 @@ function mountClassInstance(
   if (typeof instance.componentDidMount === 'function') {
     if (
       __DEV__ &&
-      enableDoubleInvokingEffects &&
+      enableStrictEffects &&
       (workInProgress.mode & StrictEffectsMode) !== NoMode
     ) {
       // Never double-invoke effects for legacy roots.
@@ -987,7 +987,7 @@ function resumeMountClassInstance(
     if (typeof instance.componentDidMount === 'function') {
       if (
         __DEV__ &&
-        enableDoubleInvokingEffects &&
+        enableStrictEffects &&
         (workInProgress.mode & StrictEffectsMode) !== NoMode
       ) {
         // Never double-invoke effects for legacy roots.
@@ -1039,7 +1039,7 @@ function resumeMountClassInstance(
     if (typeof instance.componentDidMount === 'function') {
       if (
         __DEV__ &&
-        enableDoubleInvokingEffects &&
+        enableStrictEffects &&
         (workInProgress.mode & StrictEffectsMode) !== NoMode
       ) {
         // Never double-invoke effects for legacy roots.
@@ -1054,7 +1054,7 @@ function resumeMountClassInstance(
     if (typeof instance.componentDidMount === 'function') {
       if (
         __DEV__ &&
-        enableDoubleInvokingEffects &&
+        enableStrictEffects &&
         (workInProgress.mode & StrictEffectsMode) !== NoMode
       ) {
         // Never double-invoke effects for legacy roots.

packages/react-reconciler/src/ReactFiberCommitWork.new.js

@@ -35,7 +35,7 @@ import {
   enableSuspenseServerRenderer,
   enableSuspenseCallback,
   enableScopeAPI,
-  enableDoubleInvokingEffects,
+  enableStrictEffects,
 } from 'shared/ReactFeatureFlags';
 import {
   FunctionComponent,
@@ -2475,7 +2475,7 @@ function ensureCorrectReturnPointer(fiber, expectedReturnFiber) {
 }
 
 function invokeLayoutEffectMountInDEV(fiber: Fiber): void {
-  if (__DEV__ && enableDoubleInvokingEffects) {
+  if (__DEV__ && enableStrictEffects) {
     // We don't need to re-check StrictEffectsMode here.
     // This function is only called if that check has already passed.
     switch (fiber.tag) {
@@ -2509,7 +2509,7 @@ function invokeLayoutEffectMountInDEV(fiber: Fiber): void {
 }
 
 function invokePassiveEffectMountInDEV(fiber: Fiber): void {
-  if (__DEV__ && enableDoubleInvokingEffects) {
+  if (__DEV__ && enableStrictEffects) {
     // We don't need to re-check StrictEffectsMode here.
     // This function is only called if that check has already passed.
     switch (fiber.tag) {
@@ -2534,7 +2534,7 @@ function invokePassiveEffectMountInDEV(fiber: Fiber): void {
 }
 
 function invokeLayoutEffectUnmountInDEV(fiber: Fiber): void {
-  if (__DEV__ && enableDoubleInvokingEffects) {
+  if (__DEV__ && enableStrictEffects) {
     // We don't need to re-check StrictEffectsMode here.
     // This function is only called if that check has already passed.
     switch (fiber.tag) {
@@ -2578,7 +2578,7 @@ function invokeLayoutEffectUnmountInDEV(fiber: Fiber): void {
 }
 
 function invokePassiveEffectUnmountInDEV(fiber: Fiber): void {
-  if (__DEV__ && enableDoubleInvokingEffects) {
+  if (__DEV__ && enableStrictEffects) {
     // We don't need to re-check StrictEffectsMode here.
     // This function is only called if that check has already passed.
     switch (fiber.tag) {

packages/react-reconciler/src/ReactFiberCommitWork.old.js

@@ -35,7 +35,7 @@ import {
   enableSuspenseServerRenderer,
   enableSuspenseCallback,
   enableScopeAPI,
-  enableDoubleInvokingEffects,
+  enableStrictEffects,
 } from 'shared/ReactFeatureFlags';
 import {
   FunctionComponent,
@@ -2475,7 +2475,7 @@ function ensureCorrectReturnPointer(fiber, expectedReturnFiber) {
 }
 
 function invokeLayoutEffectMountInDEV(fiber: Fiber): void {
-  if (__DEV__ && enableDoubleInvokingEffects) {
+  if (__DEV__ && enableStrictEffects) {
     // We don't need to re-check StrictEffectsMode here.
     // This function is only called if that check has already passed.
     switch (fiber.tag) {
@@ -2509,7 +2509,7 @@ function invokeLayoutEffectMountInDEV(fiber: Fiber): void {
 }
 
 function invokePassiveEffectMountInDEV(fiber: Fiber): void {
-  if (__DEV__ && enableDoubleInvokingEffects) {
+  if (__DEV__ && enableStrictEffects) {
     // We don't need to re-check StrictEffectsMode here.
     // This function is only called if that check has already passed.
     switch (fiber.tag) {
@@ -2534,7 +2534,7 @@ function invokePassiveEffectMountInDEV(fiber: Fiber): void {
 }
 
 function invokeLayoutEffectUnmountInDEV(fiber: Fiber): void {
-  if (__DEV__ && enableDoubleInvokingEffects) {
+  if (__DEV__ && enableStrictEffects) {
     // We don't need to re-check StrictEffectsMode here.
     // This function is only called if that check has already passed.
     switch (fiber.tag) {
@@ -2578,7 +2578,7 @@ function invokeLayoutEffectUnmountInDEV(fiber: Fiber): void {
 }
 
 function invokePassiveEffectUnmountInDEV(fiber: Fiber): void {
-  if (__DEV__ && enableDoubleInvokingEffects) {
+  if (__DEV__ && enableStrictEffects) {
     // We don't need to re-check StrictEffectsMode here.
     // This function is only called if that check has already passed.
     switch (fiber.tag) {

packages/react-reconciler/src/ReactFiberHooks.new.js

@@ -29,7 +29,7 @@ import {
   enableCache,
   decoupleUpdatePriorityFromScheduler,
   enableUseRefAccessWarning,
-  enableDoubleInvokingEffects,
+  enableStrictEffects,
 } from 'shared/ReactFeatureFlags';
 
 import {
@@ -509,7 +509,7 @@ export function bailoutHooks(
   // complete phase (bubbleProperties).
   if (
     __DEV__ &&
-    enableDoubleInvokingEffects &&
+    enableStrictEffects &&
     (workInProgress.mode & StrictEffectsMode) !== NoMode
   ) {
     workInProgress.flags &= ~(
@@ -1423,7 +1423,7 @@ function mountEffect(
   }
   if (
     __DEV__ &&
-    enableDoubleInvokingEffects &&
+    enableStrictEffects &&
     (currentlyRenderingFiber.mode & StrictEffectsMode) !== NoMode
   ) {
     return mountEffectImpl(
@@ -1461,7 +1461,7 @@ function mountLayoutEffect(
 ): void {
   if (
     __DEV__ &&
-    enableDoubleInvokingEffects &&
+    enableStrictEffects &&
     (currentlyRenderingFiber.mode & StrictEffectsMode) !== NoMode
   ) {
     return mountEffectImpl(
@@ -1533,7 +1533,7 @@ function mountImperativeHandle<T>(
 
   if (
     __DEV__ &&
-    enableDoubleInvokingEffects &&
+    enableStrictEffects &&
     (currentlyRenderingFiber.mode & StrictEffectsMode) !== NoMode
   ) {
     return mountEffectImpl(
@@ -1832,7 +1832,7 @@ function mountOpaqueIdentifier(): OpaqueIDType | void {
     if ((currentlyRenderingFiber.mode & BlockingMode) === NoMode) {
       if (
         __DEV__ &&
-        enableDoubleInvokingEffects &&
+        enableStrictEffects &&
         (currentlyRenderingFiber.mode & StrictEffectsMode) === NoMode
       ) {
         currentlyRenderingFiber.flags |= MountPassiveDevEffect | PassiveEffect;

packages/react-reconciler/src/ReactFiberHooks.old.js

@@ -29,7 +29,7 @@ import {
   enableCache,
   decoupleUpdatePriorityFromScheduler,
   enableUseRefAccessWarning,
-  enableDoubleInvokingEffects,
+  enableStrictEffects,
 } from 'shared/ReactFeatureFlags';
 
 import {
@@ -509,7 +509,7 @@ export function bailoutHooks(
   // complete phase (bubbleProperties).
   if (
     __DEV__ &&
-    enableDoubleInvokingEffects &&
+    enableStrictEffects &&
     (workInProgress.mode & StrictEffectsMode) !== NoMode
   ) {
     workInProgress.flags &= ~(
@@ -1423,7 +1423,7 @@ function mountEffect(
   }
   if (
     __DEV__ &&
-    enableDoubleInvokingEffects &&
+    enableStrictEffects &&
     (currentlyRenderingFiber.mode & StrictEffectsMode) !== NoMode
   ) {
     return mountEffectImpl(
@@ -1461,7 +1461,7 @@ function mountLayoutEffect(
 ): void {
   if (
     __DEV__ &&
-    enableDoubleInvokingEffects &&
+    enableStrictEffects &&
     (currentlyRenderingFiber.mode & StrictEffectsMode) !== NoMode
   ) {
     return mountEffectImpl(
@@ -1533,7 +1533,7 @@ function mountImperativeHandle<T>(
 
   if (
     __DEV__ &&
-    enableDoubleInvokingEffects &&
+    enableStrictEffects &&
     (currentlyRenderingFiber.mode & StrictEffectsMode) !== NoMode
   ) {
     return mountEffectImpl(
@@ -1832,7 +1832,7 @@ function mountOpaqueIdentifier(): OpaqueIDType | void {
     if ((currentlyRenderingFiber.mode & BlockingMode) === NoMode) {
       if (
         __DEV__ &&
-        enableDoubleInvokingEffects &&
+        enableStrictEffects &&
         (currentlyRenderingFiber.mode & StrictEffectsMode) === NoMode
       ) {
         currentlyRenderingFiber.flags |= MountPassiveDevEffect | PassiveEffect;

packages/react-reconciler/src/ReactFiberWorkLoop.new.js

@@ -32,7 +32,7 @@ import {
   enableDebugTracing,
   enableSchedulingProfiler,
   disableSchedulerTimeoutInWorkLoop,
-  enableDoubleInvokingEffects,
+  enableStrictEffects,
   skipUnmountedBoundaries,
   enableNativeEventPriorityInference,
 } from 'shared/ReactFeatureFlags';
@@ -2071,7 +2071,7 @@ function commitRootImpl(root, renderPriorityLevel) {
     legacyErrorBoundariesThatAlreadyFailed = null;
   }
 
-  if (__DEV__ && enableDoubleInvokingEffects) {
+  if (__DEV__ && enableStrictEffects) {
     if (!rootDidHavePassiveEffects) {
       commitDoubleInvokeEffectsInDEV(root.current, false);
     }
@@ -2258,7 +2258,7 @@ function flushPassiveEffectsImpl() {
     markPassiveEffectsStopped();
   }
 
-  if (__DEV__ && enableDoubleInvokingEffects) {
+  if (__DEV__ && enableStrictEffects) {
     commitDoubleInvokeEffectsInDEV(root.current, true);
   }
 
@@ -2561,7 +2561,7 @@ function commitDoubleInvokeEffectsInDEV(
   fiber: Fiber,
   hasPassiveEffects: boolean,
 ) {
-  if (__DEV__ && enableDoubleInvokingEffects) {
+  if (__DEV__ && enableStrictEffects) {
     // Never double-invoke effects outside of StrictEffectsMode.
     if ((fiber.mode & StrictEffectsMode) === NoMode) {
       return;
@@ -2590,7 +2590,7 @@ function invokeEffectsInDev(
   fiberFlags: Flags,
   invokeEffectFn: (fiber: Fiber) => void,
 ): void {
-  if (__DEV__ && enableDoubleInvokingEffects) {
+  if (__DEV__ && enableStrictEffects) {
     // We don't need to re-check StrictEffectsMode here.
     // This function is only called if that check has already passed.