diff --git a/packages/react-reconciler/src/ReactChildFiber.new.js b/packages/react-reconciler/src/ReactChildFiber.new.js index 3435694b7ab0a..222a8730c4fa2 100644 --- a/packages/react-reconciler/src/ReactChildFiber.new.js +++ b/packages/react-reconciler/src/ReactChildFiber.new.js @@ -46,7 +46,7 @@ import { } from './ReactFiber.new'; import {emptyRefsObject} from './ReactFiberClassComponent.new'; import {isCompatibleFamilyForHotReloading} from './ReactFiberHotReloading.new'; -import {StrictMode} from './ReactTypeOfMode'; +import {StrictLegacyMode} from './ReactTypeOfMode'; let didWarnAboutMaps; let didWarnAboutGenerators; @@ -114,7 +114,7 @@ function coerceRef( // TODO: Clean this up once we turn on the string ref warning for // everyone, because the strict mode case will no longer be relevant if ( - (returnFiber.mode & StrictMode || warnAboutStringRefs) && + (returnFiber.mode & StrictLegacyMode || warnAboutStringRefs) && // We warn in ReactElement.js if owner and self are equal for string refs // because these cannot be automatically converted to an arrow function // using a codemod. Therefore, we don't have to warn about string refs again. diff --git a/packages/react-reconciler/src/ReactChildFiber.old.js b/packages/react-reconciler/src/ReactChildFiber.old.js index 7a4ab0b172085..036fa65503c04 100644 --- a/packages/react-reconciler/src/ReactChildFiber.old.js +++ b/packages/react-reconciler/src/ReactChildFiber.old.js @@ -46,7 +46,7 @@ import { } from './ReactFiber.old'; import {emptyRefsObject} from './ReactFiberClassComponent.old'; import {isCompatibleFamilyForHotReloading} from './ReactFiberHotReloading.old'; -import {StrictMode} from './ReactTypeOfMode'; +import {StrictLegacyMode} from './ReactTypeOfMode'; let didWarnAboutMaps; let didWarnAboutGenerators; @@ -114,7 +114,7 @@ function coerceRef( // TODO: Clean this up once we turn on the string ref warning for // everyone, because the strict mode case will no longer be relevant if ( - (returnFiber.mode & StrictMode || warnAboutStringRefs) && + (returnFiber.mode & StrictLegacyMode || warnAboutStringRefs) && // We warn in ReactElement.js if owner and self are equal for string refs // because these cannot be automatically converted to an arrow function // using a codemod. Therefore, we don't have to warn about string refs again. diff --git a/packages/react-reconciler/src/ReactFiber.new.js b/packages/react-reconciler/src/ReactFiber.new.js index 983855ced5685..69f1ab744498c 100644 --- a/packages/react-reconciler/src/ReactFiber.new.js +++ b/packages/react-reconciler/src/ReactFiber.new.js @@ -19,9 +19,10 @@ import type {OffscreenProps} from './ReactFiberOffscreenComponent'; import invariant from 'shared/invariant'; import { + enableCache, + enableDoubleInvokingEffects, enableProfilerTimer, enableScopeAPI, - enableCache, } from 'shared/ReactFeatureFlags'; import {NoFlags, Placement, StaticMask} from './ReactFiberFlags'; import {ConcurrentRoot, BlockingRoot} from './ReactRootTags'; @@ -64,7 +65,8 @@ import { ConcurrentMode, DebugTracingMode, ProfileMode, - StrictMode, + StrictLegacyMode, + StrictEffectsMode, BlockingMode, } from './ReactTypeOfMode'; import { @@ -421,9 +423,18 @@ export function resetWorkInProgress(workInProgress: Fiber, renderLanes: Lanes) { export function createHostRootFiber(tag: RootTag): Fiber { let mode; if (tag === ConcurrentRoot) { - mode = ConcurrentMode | BlockingMode | StrictMode; + if (enableDoubleInvokingEffects) { + mode = + ConcurrentMode | BlockingMode | StrictLegacyMode | StrictEffectsMode; + } else { + mode = ConcurrentMode | BlockingMode | StrictLegacyMode; + } } else if (tag === BlockingRoot) { - mode = BlockingMode | StrictMode; + if (enableDoubleInvokingEffects) { + mode = BlockingMode | StrictLegacyMode | StrictEffectsMode; + } else { + mode = BlockingMode | StrictLegacyMode; + } } else { mode = NoMode; } @@ -472,7 +483,8 @@ export function createFiberFromTypeAndProps( break; case REACT_STRICT_MODE_TYPE: fiberTag = Mode; - mode |= StrictMode; + // TODO (StrictEffectsMode) Add support for new strict mode "level" attribute + mode |= StrictLegacyMode; 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 ed2ae45f4ec17..3f083c83c158a 100644 --- a/packages/react-reconciler/src/ReactFiber.old.js +++ b/packages/react-reconciler/src/ReactFiber.old.js @@ -19,9 +19,10 @@ import type {OffscreenProps} from './ReactFiberOffscreenComponent'; import invariant from 'shared/invariant'; import { + enableCache, + enableDoubleInvokingEffects, enableProfilerTimer, enableScopeAPI, - enableCache, } from 'shared/ReactFeatureFlags'; import {NoFlags, Placement, StaticMask} from './ReactFiberFlags'; import {ConcurrentRoot, BlockingRoot} from './ReactRootTags'; @@ -64,7 +65,8 @@ import { ConcurrentMode, DebugTracingMode, ProfileMode, - StrictMode, + StrictLegacyMode, + StrictEffectsMode, BlockingMode, } from './ReactTypeOfMode'; import { @@ -421,9 +423,18 @@ export function resetWorkInProgress(workInProgress: Fiber, renderLanes: Lanes) { export function createHostRootFiber(tag: RootTag): Fiber { let mode; if (tag === ConcurrentRoot) { - mode = ConcurrentMode | BlockingMode | StrictMode; + if (enableDoubleInvokingEffects) { + mode = + ConcurrentMode | BlockingMode | StrictLegacyMode | StrictEffectsMode; + } else { + mode = ConcurrentMode | BlockingMode | StrictLegacyMode; + } } else if (tag === BlockingRoot) { - mode = BlockingMode | StrictMode; + if (enableDoubleInvokingEffects) { + mode = BlockingMode | StrictLegacyMode | StrictEffectsMode; + } else { + mode = BlockingMode | StrictLegacyMode; + } } else { mode = NoMode; } @@ -472,7 +483,8 @@ export function createFiberFromTypeAndProps( break; case REACT_STRICT_MODE_TYPE: fiberTag = Mode; - mode |= StrictMode; + // TODO (StrictEffectsMode) Add support for new strict mode "level" attribute + mode |= StrictLegacyMode; break; case REACT_PROFILER_TYPE: return createFiberFromProfiler(pendingProps, mode, lanes, key); diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js index 6537d103e2324..6dffcc328927a 100644 --- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js +++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js @@ -125,7 +125,7 @@ import { ConcurrentMode, NoMode, ProfileMode, - StrictMode, + StrictLegacyMode, BlockingMode, } from './ReactTypeOfMode'; import { @@ -357,7 +357,7 @@ function updateForwardRef( ); if ( debugRenderPhaseSideEffectsForStrictMode && - workInProgress.mode & StrictMode + workInProgress.mode & StrictLegacyMode ) { disableLogs(); try { @@ -889,7 +889,7 @@ function updateFunctionComponent( ); if ( debugRenderPhaseSideEffectsForStrictMode && - workInProgress.mode & StrictMode + workInProgress.mode & StrictLegacyMode ) { disableLogs(); try { @@ -1068,7 +1068,7 @@ function finishClassComponent( nextChildren = instance.render(); if ( debugRenderPhaseSideEffectsForStrictMode && - workInProgress.mode & StrictMode + workInProgress.mode & StrictLegacyMode ) { disableLogs(); try { @@ -1478,7 +1478,7 @@ function mountIndeterminateComponent( } } - if (workInProgress.mode & StrictMode) { + if (workInProgress.mode & StrictLegacyMode) { ReactStrictModeWarnings.recordLegacyContextWarning(workInProgress, null); } @@ -1615,7 +1615,7 @@ function mountIndeterminateComponent( if ( debugRenderPhaseSideEffectsForStrictMode && - workInProgress.mode & StrictMode + workInProgress.mode & StrictLegacyMode ) { disableLogs(); try { diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js index 4c0594329d94e..7801afe9fa231 100644 --- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js +++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js @@ -125,7 +125,7 @@ import { ConcurrentMode, NoMode, ProfileMode, - StrictMode, + StrictLegacyMode, BlockingMode, } from './ReactTypeOfMode'; import { @@ -357,7 +357,7 @@ function updateForwardRef( ); if ( debugRenderPhaseSideEffectsForStrictMode && - workInProgress.mode & StrictMode + workInProgress.mode & StrictLegacyMode ) { disableLogs(); try { @@ -889,7 +889,7 @@ function updateFunctionComponent( ); if ( debugRenderPhaseSideEffectsForStrictMode && - workInProgress.mode & StrictMode + workInProgress.mode & StrictLegacyMode ) { disableLogs(); try { @@ -1068,7 +1068,7 @@ function finishClassComponent( nextChildren = instance.render(); if ( debugRenderPhaseSideEffectsForStrictMode && - workInProgress.mode & StrictMode + workInProgress.mode & StrictLegacyMode ) { disableLogs(); try { @@ -1478,7 +1478,7 @@ function mountIndeterminateComponent( } } - if (workInProgress.mode & StrictMode) { + if (workInProgress.mode & StrictLegacyMode) { ReactStrictModeWarnings.recordLegacyContextWarning(workInProgress, null); } @@ -1615,7 +1615,7 @@ function mountIndeterminateComponent( if ( debugRenderPhaseSideEffectsForStrictMode && - workInProgress.mode & StrictMode + workInProgress.mode & StrictLegacyMode ) { disableLogs(); try { diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.new.js b/packages/react-reconciler/src/ReactFiberClassComponent.new.js index 389b4877852db..6a4c156feb667 100644 --- a/packages/react-reconciler/src/ReactFiberClassComponent.new.js +++ b/packages/react-reconciler/src/ReactFiberClassComponent.new.js @@ -31,11 +31,10 @@ import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared/ReactSymbols'; import {resolveDefaultProps} from './ReactFiberLazyComponent.new'; import { - BlockingMode, - ConcurrentMode, DebugTracingMode, NoMode, - StrictMode, + StrictLegacyMode, + StrictEffectsMode, } from './ReactTypeOfMode'; import { @@ -165,7 +164,7 @@ export function applyDerivedStateFromProps( if (__DEV__) { if ( debugRenderPhaseSideEffectsForStrictMode && - workInProgress.mode & StrictMode + workInProgress.mode & StrictLegacyMode ) { disableLogs(); try { @@ -318,7 +317,7 @@ function checkShouldComponentUpdate( if (__DEV__) { if ( debugRenderPhaseSideEffectsForStrictMode && - workInProgress.mode & StrictMode + workInProgress.mode & StrictLegacyMode ) { disableLogs(); try { @@ -655,7 +654,7 @@ function constructClassInstance( if (__DEV__) { if ( debugRenderPhaseSideEffectsForStrictMode && - workInProgress.mode & StrictMode + workInProgress.mode & StrictLegacyMode ) { disableLogs(); try { @@ -862,7 +861,7 @@ function mountClassInstance( } } - if (workInProgress.mode & StrictMode) { + if (workInProgress.mode & StrictLegacyMode) { ReactStrictModeWarnings.recordLegacyContextWarning( workInProgress, instance, @@ -910,7 +909,7 @@ function mountClassInstance( if ( __DEV__ && enableDoubleInvokingEffects && - (workInProgress.mode & (BlockingMode | ConcurrentMode)) !== NoMode + (workInProgress.mode & StrictEffectsMode) !== NoMode ) { // Never double-invoke effects for legacy roots. workInProgress.flags |= MountLayoutDev | Update; @@ -989,7 +988,7 @@ function resumeMountClassInstance( if ( __DEV__ && enableDoubleInvokingEffects && - (workInProgress.mode & (BlockingMode | ConcurrentMode)) !== NoMode + (workInProgress.mode & StrictEffectsMode) !== NoMode ) { // Never double-invoke effects for legacy roots. workInProgress.flags |= MountLayoutDev | Update; @@ -1041,7 +1040,7 @@ function resumeMountClassInstance( if ( __DEV__ && enableDoubleInvokingEffects && - (workInProgress.mode & (BlockingMode | ConcurrentMode)) !== NoMode + (workInProgress.mode & StrictEffectsMode) !== NoMode ) { // Never double-invoke effects for legacy roots. workInProgress.flags |= MountLayoutDev | Update; @@ -1056,7 +1055,7 @@ function resumeMountClassInstance( if ( __DEV__ && enableDoubleInvokingEffects && - (workInProgress.mode & (BlockingMode | ConcurrentMode)) !== NoMode + (workInProgress.mode & StrictEffectsMode) !== NoMode ) { // Never double-invoke effects for legacy roots. workInProgress.flags |= MountLayoutDev | Update; diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.old.js b/packages/react-reconciler/src/ReactFiberClassComponent.old.js index 5f366e7c253a2..1c81ce7c6e549 100644 --- a/packages/react-reconciler/src/ReactFiberClassComponent.old.js +++ b/packages/react-reconciler/src/ReactFiberClassComponent.old.js @@ -31,11 +31,10 @@ import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared/ReactSymbols'; import {resolveDefaultProps} from './ReactFiberLazyComponent.old'; import { - BlockingMode, - ConcurrentMode, DebugTracingMode, NoMode, - StrictMode, + StrictLegacyMode, + StrictEffectsMode, } from './ReactTypeOfMode'; import { @@ -165,7 +164,7 @@ export function applyDerivedStateFromProps( if (__DEV__) { if ( debugRenderPhaseSideEffectsForStrictMode && - workInProgress.mode & StrictMode + workInProgress.mode & StrictLegacyMode ) { disableLogs(); try { @@ -318,7 +317,7 @@ function checkShouldComponentUpdate( if (__DEV__) { if ( debugRenderPhaseSideEffectsForStrictMode && - workInProgress.mode & StrictMode + workInProgress.mode & StrictLegacyMode ) { disableLogs(); try { @@ -655,7 +654,7 @@ function constructClassInstance( if (__DEV__) { if ( debugRenderPhaseSideEffectsForStrictMode && - workInProgress.mode & StrictMode + workInProgress.mode & StrictLegacyMode ) { disableLogs(); try { @@ -862,7 +861,7 @@ function mountClassInstance( } } - if (workInProgress.mode & StrictMode) { + if (workInProgress.mode & StrictLegacyMode) { ReactStrictModeWarnings.recordLegacyContextWarning( workInProgress, instance, @@ -910,7 +909,7 @@ function mountClassInstance( if ( __DEV__ && enableDoubleInvokingEffects && - (workInProgress.mode & (BlockingMode | ConcurrentMode)) !== NoMode + (workInProgress.mode & StrictEffectsMode) !== NoMode ) { // Never double-invoke effects for legacy roots. workInProgress.flags |= MountLayoutDev | Update; @@ -989,7 +988,7 @@ function resumeMountClassInstance( if ( __DEV__ && enableDoubleInvokingEffects && - (workInProgress.mode & (BlockingMode | ConcurrentMode)) !== NoMode + (workInProgress.mode & StrictEffectsMode) !== NoMode ) { // Never double-invoke effects for legacy roots. workInProgress.flags |= MountLayoutDev | Update; @@ -1041,7 +1040,7 @@ function resumeMountClassInstance( if ( __DEV__ && enableDoubleInvokingEffects && - (workInProgress.mode & (BlockingMode | ConcurrentMode)) !== NoMode + (workInProgress.mode & StrictEffectsMode) !== NoMode ) { // Never double-invoke effects for legacy roots. workInProgress.flags |= MountLayoutDev | Update; @@ -1056,7 +1055,7 @@ function resumeMountClassInstance( if ( __DEV__ && enableDoubleInvokingEffects && - (workInProgress.mode & (BlockingMode | ConcurrentMode)) !== NoMode + (workInProgress.mode & StrictEffectsMode) !== NoMode ) { // Never double-invoke effects for legacy roots. workInProgress.flags |= MountLayoutDev | Update; diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js index e170114848cc8..dbf2ee7805f50 100644 --- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js +++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js @@ -2476,8 +2476,8 @@ function ensureCorrectReturnPointer(fiber, expectedReturnFiber) { function invokeLayoutEffectMountInDEV(fiber: Fiber): void { if (__DEV__ && enableDoubleInvokingEffects) { - // We don't need to re-check for legacy roots here. - // This function will not be called within legacy roots. + // We don't need to re-check StrictEffectsMode here. + // This function is only called if that check has already passed. switch (fiber.tag) { case FunctionComponent: case ForwardRef: @@ -2510,8 +2510,8 @@ function invokeLayoutEffectMountInDEV(fiber: Fiber): void { function invokePassiveEffectMountInDEV(fiber: Fiber): void { if (__DEV__ && enableDoubleInvokingEffects) { - // We don't need to re-check for legacy roots here. - // This function will not be called within legacy roots. + // We don't need to re-check StrictEffectsMode here. + // This function is only called if that check has already passed. switch (fiber.tag) { case FunctionComponent: case ForwardRef: @@ -2535,8 +2535,8 @@ function invokePassiveEffectMountInDEV(fiber: Fiber): void { function invokeLayoutEffectUnmountInDEV(fiber: Fiber): void { if (__DEV__ && enableDoubleInvokingEffects) { - // We don't need to re-check for legacy roots here. - // This function will not be called within legacy roots. + // We don't need to re-check StrictEffectsMode here. + // This function is only called if that check has already passed. switch (fiber.tag) { case FunctionComponent: case ForwardRef: @@ -2579,8 +2579,8 @@ function invokeLayoutEffectUnmountInDEV(fiber: Fiber): void { function invokePassiveEffectUnmountInDEV(fiber: Fiber): void { if (__DEV__ && enableDoubleInvokingEffects) { - // We don't need to re-check for legacy roots here. - // This function will not be called within legacy roots. + // We don't need to re-check StrictEffectsMode here. + // This function is only called if that check has already passed. switch (fiber.tag) { case FunctionComponent: case ForwardRef: diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js index 7a27bbc48f875..cbe7439af1de5 100644 --- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js +++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js @@ -2476,8 +2476,8 @@ function ensureCorrectReturnPointer(fiber, expectedReturnFiber) { function invokeLayoutEffectMountInDEV(fiber: Fiber): void { if (__DEV__ && enableDoubleInvokingEffects) { - // We don't need to re-check for legacy roots here. - // This function will not be called within legacy roots. + // We don't need to re-check StrictEffectsMode here. + // This function is only called if that check has already passed. switch (fiber.tag) { case FunctionComponent: case ForwardRef: @@ -2510,8 +2510,8 @@ function invokeLayoutEffectMountInDEV(fiber: Fiber): void { function invokePassiveEffectMountInDEV(fiber: Fiber): void { if (__DEV__ && enableDoubleInvokingEffects) { - // We don't need to re-check for legacy roots here. - // This function will not be called within legacy roots. + // We don't need to re-check StrictEffectsMode here. + // This function is only called if that check has already passed. switch (fiber.tag) { case FunctionComponent: case ForwardRef: @@ -2535,8 +2535,8 @@ function invokePassiveEffectMountInDEV(fiber: Fiber): void { function invokeLayoutEffectUnmountInDEV(fiber: Fiber): void { if (__DEV__ && enableDoubleInvokingEffects) { - // We don't need to re-check for legacy roots here. - // This function will not be called within legacy roots. + // We don't need to re-check StrictEffectsMode here. + // This function is only called if that check has already passed. switch (fiber.tag) { case FunctionComponent: case ForwardRef: @@ -2579,8 +2579,8 @@ function invokeLayoutEffectUnmountInDEV(fiber: Fiber): void { function invokePassiveEffectUnmountInDEV(fiber: Fiber): void { if (__DEV__ && enableDoubleInvokingEffects) { - // We don't need to re-check for legacy roots here. - // This function will not be called within legacy roots. + // We don't need to re-check StrictEffectsMode here. + // This function is only called if that check has already passed. switch (fiber.tag) { case FunctionComponent: case ForwardRef: diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js index 32144cc1b0505..be92331fa2f46 100644 --- a/packages/react-reconciler/src/ReactFiberHooks.new.js +++ b/packages/react-reconciler/src/ReactFiberHooks.new.js @@ -35,8 +35,8 @@ import { import { NoMode, BlockingMode, - ConcurrentMode, DebugTracingMode, + StrictEffectsMode, } from './ReactTypeOfMode'; import { NoLane, @@ -510,7 +510,7 @@ export function bailoutHooks( if ( __DEV__ && enableDoubleInvokingEffects && - (workInProgress.mode & (BlockingMode | ConcurrentMode)) !== NoMode + (workInProgress.mode & StrictEffectsMode) !== NoMode ) { workInProgress.flags &= ~( MountPassiveDevEffect | @@ -1424,7 +1424,7 @@ function mountEffect( if ( __DEV__ && enableDoubleInvokingEffects && - (currentlyRenderingFiber.mode & (BlockingMode | ConcurrentMode)) !== NoMode + (currentlyRenderingFiber.mode & StrictEffectsMode) !== NoMode ) { return mountEffectImpl( MountPassiveDevEffect | PassiveEffect | PassiveStaticEffect, @@ -1462,7 +1462,7 @@ function mountLayoutEffect( if ( __DEV__ && enableDoubleInvokingEffects && - (currentlyRenderingFiber.mode & (BlockingMode | ConcurrentMode)) !== NoMode + (currentlyRenderingFiber.mode & StrictEffectsMode) !== NoMode ) { return mountEffectImpl( MountLayoutDevEffect | UpdateEffect, @@ -1534,7 +1534,7 @@ function mountImperativeHandle( if ( __DEV__ && enableDoubleInvokingEffects && - (currentlyRenderingFiber.mode & (BlockingMode | ConcurrentMode)) !== NoMode + (currentlyRenderingFiber.mode & StrictEffectsMode) !== NoMode ) { return mountEffectImpl( MountLayoutDevEffect | UpdateEffect, @@ -1830,7 +1830,11 @@ function mountOpaqueIdentifier(): OpaqueIDType | void { const setId = mountState(id)[1]; if ((currentlyRenderingFiber.mode & BlockingMode) === NoMode) { - if (__DEV__ && enableDoubleInvokingEffects) { + if ( + __DEV__ && + enableDoubleInvokingEffects && + (currentlyRenderingFiber.mode & StrictEffectsMode) === NoMode + ) { currentlyRenderingFiber.flags |= MountPassiveDevEffect | PassiveEffect; } else { currentlyRenderingFiber.flags |= PassiveEffect; diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js index ce0ac36636562..b8b7ca2f56a57 100644 --- a/packages/react-reconciler/src/ReactFiberHooks.old.js +++ b/packages/react-reconciler/src/ReactFiberHooks.old.js @@ -35,8 +35,8 @@ import { import { NoMode, BlockingMode, - ConcurrentMode, DebugTracingMode, + StrictEffectsMode, } from './ReactTypeOfMode'; import { NoLane, @@ -510,7 +510,7 @@ export function bailoutHooks( if ( __DEV__ && enableDoubleInvokingEffects && - (workInProgress.mode & (BlockingMode | ConcurrentMode)) !== NoMode + (workInProgress.mode & StrictEffectsMode) !== NoMode ) { workInProgress.flags &= ~( MountPassiveDevEffect | @@ -1424,7 +1424,7 @@ function mountEffect( if ( __DEV__ && enableDoubleInvokingEffects && - (currentlyRenderingFiber.mode & (BlockingMode | ConcurrentMode)) !== NoMode + (currentlyRenderingFiber.mode & StrictEffectsMode) !== NoMode ) { return mountEffectImpl( MountPassiveDevEffect | PassiveEffect | PassiveStaticEffect, @@ -1462,7 +1462,7 @@ function mountLayoutEffect( if ( __DEV__ && enableDoubleInvokingEffects && - (currentlyRenderingFiber.mode & (BlockingMode | ConcurrentMode)) !== NoMode + (currentlyRenderingFiber.mode & StrictEffectsMode) !== NoMode ) { return mountEffectImpl( MountLayoutDevEffect | UpdateEffect, @@ -1534,7 +1534,7 @@ function mountImperativeHandle( if ( __DEV__ && enableDoubleInvokingEffects && - (currentlyRenderingFiber.mode & (BlockingMode | ConcurrentMode)) !== NoMode + (currentlyRenderingFiber.mode & StrictEffectsMode) !== NoMode ) { return mountEffectImpl( MountLayoutDevEffect | UpdateEffect, @@ -1830,7 +1830,11 @@ function mountOpaqueIdentifier(): OpaqueIDType | void { const setId = mountState(id)[1]; if ((currentlyRenderingFiber.mode & BlockingMode) === NoMode) { - if (__DEV__ && enableDoubleInvokingEffects) { + if ( + __DEV__ && + enableDoubleInvokingEffects && + (currentlyRenderingFiber.mode & StrictEffectsMode) === NoMode + ) { currentlyRenderingFiber.flags |= MountPassiveDevEffect | PassiveEffect; } else { currentlyRenderingFiber.flags |= PassiveEffect; diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js index be5ee15970dc7..3b4edc51e28e8 100644 --- a/packages/react-reconciler/src/ReactFiberReconciler.new.js +++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js @@ -75,7 +75,7 @@ import { resetCurrentFiber as resetCurrentDebugFiberInDEV, setCurrentFiber as setCurrentDebugFiberInDEV, } from './ReactCurrentFiber'; -import {StrictMode} from './ReactTypeOfMode'; +import {StrictLegacyMode} from './ReactTypeOfMode'; import { SyncLane, InputDiscreteHydrationLane, @@ -204,7 +204,7 @@ function findHostInstanceWithWarning( if (hostFiber === null) { return null; } - if (hostFiber.mode & StrictMode) { + if (hostFiber.mode & StrictLegacyMode) { const componentName = getComponentName(fiber.type) || 'Component'; if (!didWarnAboutFindNodeInStrictMode[componentName]) { didWarnAboutFindNodeInStrictMode[componentName] = true; @@ -212,7 +212,7 @@ function findHostInstanceWithWarning( const previousFiber = ReactCurrentFiberCurrent; try { setCurrentDebugFiberInDEV(hostFiber); - if (fiber.mode & StrictMode) { + if (fiber.mode & StrictLegacyMode) { console.error( '%s is deprecated in StrictMode. ' + '%s was passed an instance of %s which is inside StrictMode. ' + diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js index 77032eb24b108..ecbcbd8a9e5e3 100644 --- a/packages/react-reconciler/src/ReactFiberReconciler.old.js +++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js @@ -75,7 +75,7 @@ import { resetCurrentFiber as resetCurrentDebugFiberInDEV, setCurrentFiber as setCurrentDebugFiberInDEV, } from './ReactCurrentFiber'; -import {StrictMode} from './ReactTypeOfMode'; +import {StrictLegacyMode} from './ReactTypeOfMode'; import { SyncLane, InputDiscreteHydrationLane, @@ -204,7 +204,7 @@ function findHostInstanceWithWarning( if (hostFiber === null) { return null; } - if (hostFiber.mode & StrictMode) { + if (hostFiber.mode & StrictLegacyMode) { const componentName = getComponentName(fiber.type) || 'Component'; if (!didWarnAboutFindNodeInStrictMode[componentName]) { didWarnAboutFindNodeInStrictMode[componentName] = true; @@ -212,7 +212,7 @@ function findHostInstanceWithWarning( const previousFiber = ReactCurrentFiberCurrent; try { setCurrentDebugFiberInDEV(hostFiber); - if (fiber.mode & StrictMode) { + if (fiber.mode & StrictLegacyMode) { console.error( '%s is deprecated in StrictMode. ' + '%s was passed an instance of %s which is inside StrictMode. ' + diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js index 918261a2e3562..eb6c139486b38 100644 --- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js +++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js @@ -104,7 +104,8 @@ import { } from './ReactFiber.new'; import { NoMode, - StrictMode, + StrictLegacyMode, + StrictEffectsMode, ProfileMode, BlockingMode, ConcurrentMode, @@ -2561,8 +2562,8 @@ function commitDoubleInvokeEffectsInDEV( hasPassiveEffects: boolean, ) { if (__DEV__ && enableDoubleInvokingEffects) { - // Never double-invoke effects for legacy roots. - if ((fiber.mode & (BlockingMode | ConcurrentMode)) === NoMode) { + // Never double-invoke effects outside of StrictEffectsMode. + if ((fiber.mode & StrictEffectsMode) === NoMode) { return; } @@ -2590,8 +2591,8 @@ function invokeEffectsInDev( invokeEffectFn: (fiber: Fiber) => void, ): void { if (__DEV__ && enableDoubleInvokingEffects) { - // We don't need to re-check for legacy roots here. - // This function will not be called within legacy roots. + // We don't need to re-check StrictEffectsMode here. + // This function is only called if that check has already passed. let current = firstChild; let subtreeRoot = null; @@ -2934,7 +2935,7 @@ export function warnIfNotCurrentlyActingEffectsInDEV(fiber: Fiber): void { if (__DEV__) { if ( warnsIfNotActing === true && - (fiber.mode & StrictMode) !== NoMode && + (fiber.mode & StrictLegacyMode) !== NoMode && IsSomeRendererActing.current === false && IsThisRendererActing.current === false ) { diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js index 12ef384a47527..049d9387ba4ba 100644 --- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js +++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js @@ -104,7 +104,8 @@ import { } from './ReactFiber.old'; import { NoMode, - StrictMode, + StrictLegacyMode, + StrictEffectsMode, ProfileMode, BlockingMode, ConcurrentMode, @@ -2561,8 +2562,8 @@ function commitDoubleInvokeEffectsInDEV( hasPassiveEffects: boolean, ) { if (__DEV__ && enableDoubleInvokingEffects) { - // Never double-invoke effects for legacy roots. - if ((fiber.mode & (BlockingMode | ConcurrentMode)) === NoMode) { + // Never double-invoke effects outside of StrictEffectsMode. + if ((fiber.mode & StrictEffectsMode) === NoMode) { return; } @@ -2590,8 +2591,8 @@ function invokeEffectsInDev( invokeEffectFn: (fiber: Fiber) => void, ): void { if (__DEV__ && enableDoubleInvokingEffects) { - // We don't need to re-check for legacy roots here. - // This function will not be called within legacy roots. + // We don't need to re-check StrictEffectsMode here. + // This function is only called if that check has already passed. let current = firstChild; let subtreeRoot = null; @@ -2934,7 +2935,7 @@ export function warnIfNotCurrentlyActingEffectsInDEV(fiber: Fiber): void { if (__DEV__) { if ( warnsIfNotActing === true && - (fiber.mode & StrictMode) !== NoMode && + (fiber.mode & StrictLegacyMode) !== NoMode && IsSomeRendererActing.current === false && IsThisRendererActing.current === false ) { diff --git a/packages/react-reconciler/src/ReactStrictModeWarnings.new.js b/packages/react-reconciler/src/ReactStrictModeWarnings.new.js index 5dd09a8cc80da..972c106c632cf 100644 --- a/packages/react-reconciler/src/ReactStrictModeWarnings.new.js +++ b/packages/react-reconciler/src/ReactStrictModeWarnings.new.js @@ -14,7 +14,7 @@ import { setCurrentFiber as setCurrentDebugFiberInDEV, } from './ReactCurrentFiber'; import getComponentName from 'shared/getComponentName'; -import {StrictMode} from './ReactTypeOfMode'; +import {StrictLegacyMode} from './ReactTypeOfMode'; type FiberArray = Array; type FiberToFiberComponentsMap = Map; @@ -33,7 +33,7 @@ if (__DEV__) { let node = fiber; while (node !== null) { - if (node.mode & StrictMode) { + if (node.mode & StrictLegacyMode) { maybeStrictRoot = node; } node = node.return; @@ -78,7 +78,7 @@ if (__DEV__) { } if ( - fiber.mode & StrictMode && + fiber.mode & StrictLegacyMode && typeof instance.UNSAFE_componentWillMount === 'function' ) { pendingUNSAFE_ComponentWillMountWarnings.push(fiber); @@ -92,7 +92,7 @@ if (__DEV__) { } if ( - fiber.mode & StrictMode && + fiber.mode & StrictLegacyMode && typeof instance.UNSAFE_componentWillReceiveProps === 'function' ) { pendingUNSAFE_ComponentWillReceivePropsWarnings.push(fiber); @@ -106,7 +106,7 @@ if (__DEV__) { } if ( - fiber.mode & StrictMode && + fiber.mode & StrictLegacyMode && typeof instance.UNSAFE_componentWillUpdate === 'function' ) { pendingUNSAFE_ComponentWillUpdateWarnings.push(fiber); diff --git a/packages/react-reconciler/src/ReactStrictModeWarnings.old.js b/packages/react-reconciler/src/ReactStrictModeWarnings.old.js index 5dd09a8cc80da..972c106c632cf 100644 --- a/packages/react-reconciler/src/ReactStrictModeWarnings.old.js +++ b/packages/react-reconciler/src/ReactStrictModeWarnings.old.js @@ -14,7 +14,7 @@ import { setCurrentFiber as setCurrentDebugFiberInDEV, } from './ReactCurrentFiber'; import getComponentName from 'shared/getComponentName'; -import {StrictMode} from './ReactTypeOfMode'; +import {StrictLegacyMode} from './ReactTypeOfMode'; type FiberArray = Array; type FiberToFiberComponentsMap = Map; @@ -33,7 +33,7 @@ if (__DEV__) { let node = fiber; while (node !== null) { - if (node.mode & StrictMode) { + if (node.mode & StrictLegacyMode) { maybeStrictRoot = node; } node = node.return; @@ -78,7 +78,7 @@ if (__DEV__) { } if ( - fiber.mode & StrictMode && + fiber.mode & StrictLegacyMode && typeof instance.UNSAFE_componentWillMount === 'function' ) { pendingUNSAFE_ComponentWillMountWarnings.push(fiber); @@ -92,7 +92,7 @@ if (__DEV__) { } if ( - fiber.mode & StrictMode && + fiber.mode & StrictLegacyMode && typeof instance.UNSAFE_componentWillReceiveProps === 'function' ) { pendingUNSAFE_ComponentWillReceivePropsWarnings.push(fiber); @@ -106,7 +106,7 @@ if (__DEV__) { } if ( - fiber.mode & StrictMode && + fiber.mode & StrictLegacyMode && typeof instance.UNSAFE_componentWillUpdate === 'function' ) { pendingUNSAFE_ComponentWillUpdateWarnings.push(fiber); diff --git a/packages/react-reconciler/src/ReactTypeOfMode.js b/packages/react-reconciler/src/ReactTypeOfMode.js index f6092058d2ba0..a6499be7aca11 100644 --- a/packages/react-reconciler/src/ReactTypeOfMode.js +++ b/packages/react-reconciler/src/ReactTypeOfMode.js @@ -9,11 +9,11 @@ export type TypeOfMode = number; -export const NoMode = 0b00000; -export const StrictMode = 0b00001; -// TODO: Remove BlockingMode and ConcurrentMode by reading from the root -// tag instead -export const BlockingMode = 0b00010; -export const ConcurrentMode = 0b00100; -export const ProfileMode = 0b01000; -export const DebugTracingMode = 0b10000; +export const NoMode = /* */ 0b000000; +// TODO: Remove BlockingMode and ConcurrentMode by reading from the root tag instead +export const BlockingMode = /* */ 0b000001; +export const ConcurrentMode = /* */ 0b000010; +export const ProfileMode = /* */ 0b000100; +export const DebugTracingMode = /* */ 0b001000; +export const StrictLegacyMode = /* */ 0b010000; +export const StrictEffectsMode = /* */ 0b100000; diff --git a/packages/react-reconciler/src/ReactUpdateQueue.new.js b/packages/react-reconciler/src/ReactUpdateQueue.new.js index bb4e9e1bc52dc..0bdcbf580764a 100644 --- a/packages/react-reconciler/src/ReactUpdateQueue.new.js +++ b/packages/react-reconciler/src/ReactUpdateQueue.new.js @@ -104,7 +104,7 @@ import {Callback, ShouldCapture, DidCapture} from './ReactFiberFlags'; import {debugRenderPhaseSideEffectsForStrictMode} from 'shared/ReactFeatureFlags'; -import {StrictMode} from './ReactTypeOfMode'; +import {StrictLegacyMode} from './ReactTypeOfMode'; import { markSkippedUpdateLanes, isInterleavedUpdate, @@ -392,7 +392,7 @@ function getStateFromUpdate( if (__DEV__) { if ( debugRenderPhaseSideEffectsForStrictMode && - workInProgress.mode & StrictMode + workInProgress.mode & StrictLegacyMode ) { disableLogs(); try { @@ -425,7 +425,7 @@ function getStateFromUpdate( if (__DEV__) { if ( debugRenderPhaseSideEffectsForStrictMode && - workInProgress.mode & StrictMode + workInProgress.mode & StrictLegacyMode ) { disableLogs(); try { diff --git a/packages/react-reconciler/src/ReactUpdateQueue.old.js b/packages/react-reconciler/src/ReactUpdateQueue.old.js index 6b578ef9c80d6..209abfb32e743 100644 --- a/packages/react-reconciler/src/ReactUpdateQueue.old.js +++ b/packages/react-reconciler/src/ReactUpdateQueue.old.js @@ -104,7 +104,7 @@ import {Callback, ShouldCapture, DidCapture} from './ReactFiberFlags'; import {debugRenderPhaseSideEffectsForStrictMode} from 'shared/ReactFeatureFlags'; -import {StrictMode} from './ReactTypeOfMode'; +import {StrictLegacyMode} from './ReactTypeOfMode'; import { markSkippedUpdateLanes, isInterleavedUpdate, @@ -392,7 +392,7 @@ function getStateFromUpdate( if (__DEV__) { if ( debugRenderPhaseSideEffectsForStrictMode && - workInProgress.mode & StrictMode + workInProgress.mode & StrictLegacyMode ) { disableLogs(); try { @@ -425,7 +425,7 @@ function getStateFromUpdate( if (__DEV__) { if ( debugRenderPhaseSideEffectsForStrictMode && - workInProgress.mode & StrictMode + workInProgress.mode & StrictLegacyMode ) { disableLogs(); try { diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js index 778881bc5837d..43381ed8b8b06 100644 --- a/packages/shared/ReactFeatureFlags.js +++ b/packages/shared/ReactFeatureFlags.js @@ -20,9 +20,13 @@ export const enableDebugTracing = false; export const enableSchedulingProfiler = __PROFILE__ && __EXPERIMENTAL__; // Helps identify side effects in render-phase lifecycle hooks and setState -// reducers by double invoking them in Strict Mode. +// reducers by double invoking them in StrictLegacyMode. export const debugRenderPhaseSideEffectsForStrictMode = __DEV__; +// Helps identify code that is not safe for planned Offscreen API and Suspense semantics; +// this feature flag only impacts StrictEffectsMode. +export const enableDoubleInvokingEffects = false; + // To preserve the "Pause on caught exceptions" behavior of the debugger, we // replay the begin phase of a failed component inside invokeGuardedCallback. export const replayFailedUnitOfWorkWithInvokeGuardedCallback = __DEV__; @@ -139,8 +143,6 @@ export const decoupleUpdatePriorityFromScheduler = false; export const enableDiscreteEventFlushingChange = false; -export const enableDoubleInvokingEffects = false; - export const enableUseRefAccessWarning = false; export const enableRecursiveCommitTraversal = false;