From b36f7223573c23da8ed794fcac81c607c389fe5f Mon Sep 17 00:00:00 2001 From: Samuel Susla Date: Thu, 25 Aug 2022 20:23:10 +0100 Subject: [PATCH] Remove ReactFiberFlags MountLayoutDev and MountPassiveDev (#25091) --- .../src/ReactFiberClassComponent.new.js | 51 ++------------ .../src/ReactFiberClassComponent.old.js | 51 ++------------ .../react-reconciler/src/ReactFiberFlags.js | 58 +++++++-------- .../src/ReactFiberHooks.new.js | 70 +++---------------- .../src/ReactFiberHooks.old.js | 70 +++---------------- 5 files changed, 59 insertions(+), 241 deletions(-) diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.new.js b/packages/react-reconciler/src/ReactFiberClassComponent.new.js index c0a3418c93ba1..37aef0a84f743 100644 --- a/packages/react-reconciler/src/ReactFiberClassComponent.new.js +++ b/packages/react-reconciler/src/ReactFiberClassComponent.new.js @@ -13,19 +13,13 @@ import type {UpdateQueue} from './ReactFiberClassUpdateQueue.new'; import type {Flags} from './ReactFiberFlags'; import * as React from 'react'; -import { - LayoutStatic, - MountLayoutDev, - Update, - Snapshot, -} from './ReactFiberFlags'; +import {LayoutStatic, Update, Snapshot} from './ReactFiberFlags'; import { debugRenderPhaseSideEffectsForStrictMode, disableLegacyContext, enableDebugTracing, enableSchedulingProfiler, warnAboutDeprecatedLifecycles, - enableStrictEffects, enableLazyContextPropagation, } from 'shared/ReactFeatureFlags'; import ReactStrictModeWarnings from './ReactStrictModeWarnings.new'; @@ -39,12 +33,7 @@ import isArray from 'shared/isArray'; import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared/ReactSymbols'; import {resolveDefaultProps} from './ReactFiberLazyComponent.new'; -import { - DebugTracingMode, - NoMode, - StrictLegacyMode, - StrictEffectsMode, -} from './ReactTypeOfMode'; +import {DebugTracingMode, StrictLegacyMode} from './ReactTypeOfMode'; import { enqueueUpdate, @@ -907,14 +896,7 @@ function mountClassInstance( } if (typeof instance.componentDidMount === 'function') { - let fiberFlags: Flags = Update | LayoutStatic; - if ( - __DEV__ && - enableStrictEffects && - (workInProgress.mode & StrictEffectsMode) !== NoMode - ) { - fiberFlags |= MountLayoutDev; - } + const fiberFlags: Flags = Update | LayoutStatic; workInProgress.flags |= fiberFlags; } } @@ -985,14 +967,7 @@ function resumeMountClassInstance( // If an update was already in progress, we should schedule an Update // effect even though we're bailing out, so that cWU/cDU are called. if (typeof instance.componentDidMount === 'function') { - let fiberFlags: Flags = Update | LayoutStatic; - if ( - __DEV__ && - enableStrictEffects && - (workInProgress.mode & StrictEffectsMode) !== NoMode - ) { - fiberFlags |= MountLayoutDev; - } + const fiberFlags: Flags = Update | LayoutStatic; workInProgress.flags |= fiberFlags; } return false; @@ -1036,28 +1011,14 @@ function resumeMountClassInstance( } } if (typeof instance.componentDidMount === 'function') { - let fiberFlags: Flags = Update | LayoutStatic; - if ( - __DEV__ && - enableStrictEffects && - (workInProgress.mode & StrictEffectsMode) !== NoMode - ) { - fiberFlags |= MountLayoutDev; - } + const fiberFlags: Flags = Update | LayoutStatic; workInProgress.flags |= fiberFlags; } } else { // If an update was already in progress, we should schedule an Update // effect even though we're bailing out, so that cWU/cDU are called. if (typeof instance.componentDidMount === 'function') { - let fiberFlags: Flags = Update | LayoutStatic; - if ( - __DEV__ && - enableStrictEffects && - (workInProgress.mode & StrictEffectsMode) !== NoMode - ) { - fiberFlags |= MountLayoutDev; - } + const fiberFlags: Flags = Update | LayoutStatic; workInProgress.flags |= fiberFlags; } diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.old.js b/packages/react-reconciler/src/ReactFiberClassComponent.old.js index aa709f7ad6cf2..3211717d886f1 100644 --- a/packages/react-reconciler/src/ReactFiberClassComponent.old.js +++ b/packages/react-reconciler/src/ReactFiberClassComponent.old.js @@ -13,19 +13,13 @@ import type {UpdateQueue} from './ReactFiberClassUpdateQueue.old'; import type {Flags} from './ReactFiberFlags'; import * as React from 'react'; -import { - LayoutStatic, - MountLayoutDev, - Update, - Snapshot, -} from './ReactFiberFlags'; +import {LayoutStatic, Update, Snapshot} from './ReactFiberFlags'; import { debugRenderPhaseSideEffectsForStrictMode, disableLegacyContext, enableDebugTracing, enableSchedulingProfiler, warnAboutDeprecatedLifecycles, - enableStrictEffects, enableLazyContextPropagation, } from 'shared/ReactFeatureFlags'; import ReactStrictModeWarnings from './ReactStrictModeWarnings.old'; @@ -39,12 +33,7 @@ import isArray from 'shared/isArray'; import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared/ReactSymbols'; import {resolveDefaultProps} from './ReactFiberLazyComponent.old'; -import { - DebugTracingMode, - NoMode, - StrictLegacyMode, - StrictEffectsMode, -} from './ReactTypeOfMode'; +import {DebugTracingMode, StrictLegacyMode} from './ReactTypeOfMode'; import { enqueueUpdate, @@ -907,14 +896,7 @@ function mountClassInstance( } if (typeof instance.componentDidMount === 'function') { - let fiberFlags: Flags = Update | LayoutStatic; - if ( - __DEV__ && - enableStrictEffects && - (workInProgress.mode & StrictEffectsMode) !== NoMode - ) { - fiberFlags |= MountLayoutDev; - } + const fiberFlags: Flags = Update | LayoutStatic; workInProgress.flags |= fiberFlags; } } @@ -985,14 +967,7 @@ function resumeMountClassInstance( // If an update was already in progress, we should schedule an Update // effect even though we're bailing out, so that cWU/cDU are called. if (typeof instance.componentDidMount === 'function') { - let fiberFlags: Flags = Update | LayoutStatic; - if ( - __DEV__ && - enableStrictEffects && - (workInProgress.mode & StrictEffectsMode) !== NoMode - ) { - fiberFlags |= MountLayoutDev; - } + const fiberFlags: Flags = Update | LayoutStatic; workInProgress.flags |= fiberFlags; } return false; @@ -1036,28 +1011,14 @@ function resumeMountClassInstance( } } if (typeof instance.componentDidMount === 'function') { - let fiberFlags: Flags = Update | LayoutStatic; - if ( - __DEV__ && - enableStrictEffects && - (workInProgress.mode & StrictEffectsMode) !== NoMode - ) { - fiberFlags |= MountLayoutDev; - } + const fiberFlags: Flags = Update | LayoutStatic; workInProgress.flags |= fiberFlags; } } else { // If an update was already in progress, we should schedule an Update // effect even though we're bailing out, so that cWU/cDU are called. if (typeof instance.componentDidMount === 'function') { - let fiberFlags: Flags = Update | LayoutStatic; - if ( - __DEV__ && - enableStrictEffects && - (workInProgress.mode & StrictEffectsMode) !== NoMode - ) { - fiberFlags |= MountLayoutDev; - } + const fiberFlags: Flags = Update | LayoutStatic; workInProgress.flags |= fiberFlags; } diff --git a/packages/react-reconciler/src/ReactFiberFlags.js b/packages/react-reconciler/src/ReactFiberFlags.js index 9059d115c1293..08c124b5cf6e2 100644 --- a/packages/react-reconciler/src/ReactFiberFlags.js +++ b/packages/react-reconciler/src/ReactFiberFlags.js @@ -12,53 +12,49 @@ import {enableCreateEventHandleAPI} from 'shared/ReactFeatureFlags'; export type Flags = number; // Don't change these two values. They're used by React Dev Tools. -export const NoFlags = /* */ 0b00000000000000000000000000; -export const PerformedWork = /* */ 0b00000000000000000000000001; +export const NoFlags = /* */ 0b000000000000000000000000; +export const PerformedWork = /* */ 0b000000000000000000000001; // You can change the rest (and add more). -export const Placement = /* */ 0b00000000000000000000000010; -export const Update = /* */ 0b00000000000000000000000100; -export const ChildDeletion = /* */ 0b00000000000000000000001000; -export const ContentReset = /* */ 0b00000000000000000000010000; -export const Callback = /* */ 0b00000000000000000000100000; -export const DidCapture = /* */ 0b00000000000000000001000000; -export const ForceClientRender = /* */ 0b00000000000000000010000000; -export const Ref = /* */ 0b00000000000000000100000000; -export const Snapshot = /* */ 0b00000000000000001000000000; -export const Passive = /* */ 0b00000000000000010000000000; -export const Hydrating = /* */ 0b00000000000000100000000000; -export const Visibility = /* */ 0b00000000000001000000000000; -export const StoreConsistency = /* */ 0b00000000000010000000000000; +export const Placement = /* */ 0b000000000000000000000010; +export const Update = /* */ 0b000000000000000000000100; +export const ChildDeletion = /* */ 0b000000000000000000001000; +export const ContentReset = /* */ 0b000000000000000000010000; +export const Callback = /* */ 0b000000000000000000100000; +export const DidCapture = /* */ 0b000000000000000001000000; +export const ForceClientRender = /* */ 0b000000000000000010000000; +export const Ref = /* */ 0b000000000000000100000000; +export const Snapshot = /* */ 0b000000000000001000000000; +export const Passive = /* */ 0b000000000000010000000000; +export const Hydrating = /* */ 0b000000000000100000000000; +export const Visibility = /* */ 0b000000000001000000000000; +export const StoreConsistency = /* */ 0b000000000010000000000000; export const LifecycleEffectMask = Passive | Update | Callback | Ref | Snapshot | StoreConsistency; // Union of all commit flags (flags with the lifetime of a particular commit) -export const HostEffectMask = /* */ 0b00000000000011111111111111; +export const HostEffectMask = /* */ 0b000000000011111111111111; // These are not really side effects, but we still reuse this field. -export const Incomplete = /* */ 0b00000000000100000000000000; -export const ShouldCapture = /* */ 0b00000000001000000000000000; -export const ForceUpdateForLegacySuspense = /* */ 0b00000000010000000000000000; -export const DidPropagateContext = /* */ 0b00000000100000000000000000; -export const NeedsPropagation = /* */ 0b00000001000000000000000000; -export const Forked = /* */ 0b00000010000000000000000000; +export const Incomplete = /* */ 0b000000000100000000000000; +export const ShouldCapture = /* */ 0b000000001000000000000000; +export const ForceUpdateForLegacySuspense = /* */ 0b000000010000000000000000; +export const DidPropagateContext = /* */ 0b000000100000000000000000; +export const NeedsPropagation = /* */ 0b000001000000000000000000; +export const Forked = /* */ 0b000010000000000000000000; // Static tags describe aspects of a fiber that are not specific to a render, // e.g. a fiber uses a passive effect (even if there are no updates on this particular render). // This enables us to defer more work in the unmount case, // since we can defer traversing the tree during layout to look for Passive effects, // and instead rely on the static flag as a signal that there may be cleanup work. -export const RefStatic = /* */ 0b00000100000000000000000000; -export const LayoutStatic = /* */ 0b00001000000000000000000000; -export const PassiveStatic = /* */ 0b00010000000000000000000000; +export const RefStatic = /* */ 0b000100000000000000000000; +export const LayoutStatic = /* */ 0b001000000000000000000000; +export const PassiveStatic = /* */ 0b010000000000000000000000; -// These flags allow us to traverse to fibers that have effects on mount -// without traversing the entire tree after every commit for -// double invoking -export const MountLayoutDev = /* */ 0b00100000000000000000000000; -export const MountPassiveDev = /* */ 0b01000000000000000000000000; -export const PlacementDEV = /* */ 0b10000000000000000000000000; +// Flag used to identify newly inserted fibers. It isn't reset after commit unlike `Placement`. +export const PlacementDEV = /* */ 0b100000000000000000000000; // Groups of flags that are used in the commit phase to skip over trees that // don't contain effects, by checking subtreeFlags. diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js index f52aac204c693..2c06f94d58119 100644 --- a/packages/react-reconciler/src/ReactFiberHooks.new.js +++ b/packages/react-reconciler/src/ReactFiberHooks.new.js @@ -30,7 +30,6 @@ import { enableNewReconciler, enableCache, enableUseRefAccessWarning, - enableStrictEffects, enableLazyContextPropagation, enableUseMutableSource, enableTransitionTracing, @@ -38,12 +37,7 @@ import { enableUseMemoCacheHook, } from 'shared/ReactFeatureFlags'; -import { - NoMode, - ConcurrentMode, - DebugTracingMode, - StrictEffectsMode, -} from './ReactTypeOfMode'; +import {NoMode, ConcurrentMode, DebugTracingMode} from './ReactTypeOfMode'; import { NoLane, SyncLane, @@ -71,8 +65,6 @@ import {readContext, checkIfContextChanged} from './ReactFiberNewContext.new'; import {HostRoot, CacheComponent} from './ReactWorkTags'; import { LayoutStatic as LayoutStaticEffect, - MountLayoutDev as MountLayoutDevEffect, - MountPassiveDev as MountPassiveDevEffect, Passive as PassiveEffect, PassiveStatic as PassiveStaticEffect, StaticMask as StaticMaskEffect, @@ -583,22 +575,7 @@ export function bailoutHooks( lanes: Lanes, ) { workInProgress.updateQueue = current.updateQueue; - // TODO: Don't need to reset the flags here, because they're reset in the - // complete phase (bubbleProperties). - if ( - __DEV__ && - enableStrictEffects && - (workInProgress.mode & StrictEffectsMode) !== NoMode - ) { - workInProgress.flags &= ~( - MountPassiveDevEffect | - MountLayoutDevEffect | - PassiveEffect | - UpdateEffect - ); - } else { - workInProgress.flags &= ~(PassiveEffect | UpdateEffect); - } + workInProgress.flags &= ~(PassiveEffect | UpdateEffect); current.lanes = removeLanes(current.lanes, lanes); } @@ -1788,25 +1765,12 @@ function mountEffect( create: () => (() => void) | void, deps: Array | void | null, ): void { - if ( - __DEV__ && - enableStrictEffects && - (currentlyRenderingFiber.mode & StrictEffectsMode) !== NoMode - ) { - return mountEffectImpl( - MountPassiveDevEffect | PassiveEffect | PassiveStaticEffect, - HookPassive, - create, - deps, - ); - } else { - return mountEffectImpl( - PassiveEffect | PassiveStaticEffect, - HookPassive, - create, - deps, - ); - } + return mountEffectImpl( + PassiveEffect | PassiveStaticEffect, + HookPassive, + create, + deps, + ); } function updateEffect( @@ -1834,14 +1798,7 @@ function mountLayoutEffect( create: () => (() => void) | void, deps: Array | void | null, ): void { - let fiberFlags: Flags = UpdateEffect | LayoutStaticEffect; - if ( - __DEV__ && - enableStrictEffects && - (currentlyRenderingFiber.mode & StrictEffectsMode) !== NoMode - ) { - fiberFlags |= MountLayoutDevEffect; - } + const fiberFlags: Flags = UpdateEffect | LayoutStaticEffect; return mountEffectImpl(fiberFlags, HookLayout, create, deps); } @@ -1901,14 +1858,7 @@ function mountImperativeHandle( const effectDeps = deps !== null && deps !== undefined ? deps.concat([ref]) : null; - let fiberFlags: Flags = UpdateEffect | LayoutStaticEffect; - if ( - __DEV__ && - enableStrictEffects && - (currentlyRenderingFiber.mode & StrictEffectsMode) !== NoMode - ) { - fiberFlags |= MountLayoutDevEffect; - } + const fiberFlags: Flags = UpdateEffect | LayoutStaticEffect; return mountEffectImpl( fiberFlags, HookLayout, diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js index 473b8aace6ccd..e258a9f824e20 100644 --- a/packages/react-reconciler/src/ReactFiberHooks.old.js +++ b/packages/react-reconciler/src/ReactFiberHooks.old.js @@ -30,7 +30,6 @@ import { enableNewReconciler, enableCache, enableUseRefAccessWarning, - enableStrictEffects, enableLazyContextPropagation, enableUseMutableSource, enableTransitionTracing, @@ -38,12 +37,7 @@ import { enableUseMemoCacheHook, } from 'shared/ReactFeatureFlags'; -import { - NoMode, - ConcurrentMode, - DebugTracingMode, - StrictEffectsMode, -} from './ReactTypeOfMode'; +import {NoMode, ConcurrentMode, DebugTracingMode} from './ReactTypeOfMode'; import { NoLane, SyncLane, @@ -71,8 +65,6 @@ import {readContext, checkIfContextChanged} from './ReactFiberNewContext.old'; import {HostRoot, CacheComponent} from './ReactWorkTags'; import { LayoutStatic as LayoutStaticEffect, - MountLayoutDev as MountLayoutDevEffect, - MountPassiveDev as MountPassiveDevEffect, Passive as PassiveEffect, PassiveStatic as PassiveStaticEffect, StaticMask as StaticMaskEffect, @@ -583,22 +575,7 @@ export function bailoutHooks( lanes: Lanes, ) { workInProgress.updateQueue = current.updateQueue; - // TODO: Don't need to reset the flags here, because they're reset in the - // complete phase (bubbleProperties). - if ( - __DEV__ && - enableStrictEffects && - (workInProgress.mode & StrictEffectsMode) !== NoMode - ) { - workInProgress.flags &= ~( - MountPassiveDevEffect | - MountLayoutDevEffect | - PassiveEffect | - UpdateEffect - ); - } else { - workInProgress.flags &= ~(PassiveEffect | UpdateEffect); - } + workInProgress.flags &= ~(PassiveEffect | UpdateEffect); current.lanes = removeLanes(current.lanes, lanes); } @@ -1788,25 +1765,12 @@ function mountEffect( create: () => (() => void) | void, deps: Array | void | null, ): void { - if ( - __DEV__ && - enableStrictEffects && - (currentlyRenderingFiber.mode & StrictEffectsMode) !== NoMode - ) { - return mountEffectImpl( - MountPassiveDevEffect | PassiveEffect | PassiveStaticEffect, - HookPassive, - create, - deps, - ); - } else { - return mountEffectImpl( - PassiveEffect | PassiveStaticEffect, - HookPassive, - create, - deps, - ); - } + return mountEffectImpl( + PassiveEffect | PassiveStaticEffect, + HookPassive, + create, + deps, + ); } function updateEffect( @@ -1834,14 +1798,7 @@ function mountLayoutEffect( create: () => (() => void) | void, deps: Array | void | null, ): void { - let fiberFlags: Flags = UpdateEffect | LayoutStaticEffect; - if ( - __DEV__ && - enableStrictEffects && - (currentlyRenderingFiber.mode & StrictEffectsMode) !== NoMode - ) { - fiberFlags |= MountLayoutDevEffect; - } + const fiberFlags: Flags = UpdateEffect | LayoutStaticEffect; return mountEffectImpl(fiberFlags, HookLayout, create, deps); } @@ -1901,14 +1858,7 @@ function mountImperativeHandle( const effectDeps = deps !== null && deps !== undefined ? deps.concat([ref]) : null; - let fiberFlags: Flags = UpdateEffect | LayoutStaticEffect; - if ( - __DEV__ && - enableStrictEffects && - (currentlyRenderingFiber.mode & StrictEffectsMode) !== NoMode - ) { - fiberFlags |= MountLayoutDevEffect; - } + const fiberFlags: Flags = UpdateEffect | LayoutStaticEffect; return mountEffectImpl( fiberFlags, HookLayout,