Skip to content

Commit

Permalink
Remove ReactFiberFlags MountLayoutDev and MountPassiveDev (#25091)
Browse files Browse the repository at this point in the history
  • Loading branch information
@sammy-SC
sammy-SC committed Aug 25, 2022
1 parent b6978bc commit b36f722
Show file tree
Hide file tree
Showing 5 changed files with 59 additions and 241 deletions.
51 changes: 6 additions & 45 deletions packages/react-reconciler/src/ReactFiberClassComponent.new.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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,
Expand Down Expand Up @@ -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;
}
}
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}

Expand Down
51 changes: 6 additions & 45 deletions packages/react-reconciler/src/ReactFiberClassComponent.old.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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,
Expand Down Expand Up @@ -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;
}
}
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}

Expand Down
58 changes: 27 additions & 31 deletions packages/react-reconciler/src/ReactFiberFlags.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
70 changes: 10 additions & 60 deletions packages/react-reconciler/src/ReactFiberHooks.new.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,20 +30,14 @@ import {
enableNewReconciler,
enableCache,
enableUseRefAccessWarning,
enableStrictEffects,
enableLazyContextPropagation,
enableUseMutableSource,
enableTransitionTracing,
enableUseHook,
enableUseMemoCacheHook,
} from 'shared/ReactFeatureFlags';

import {
NoMode,
ConcurrentMode,
DebugTracingMode,
StrictEffectsMode,
} from './ReactTypeOfMode';
import {NoMode, ConcurrentMode, DebugTracingMode} from './ReactTypeOfMode';
import {
NoLane,
SyncLane,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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);
}

Expand Down Expand Up @@ -1788,25 +1765,12 @@ function mountEffect(
create: () => (() => void) | void,
deps: Array<mixed> | 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(
Expand Down Expand Up @@ -1834,14 +1798,7 @@ function mountLayoutEffect(
create: () => (() => void) | void,
deps: Array<mixed> | 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);
}

Expand Down Expand Up @@ -1901,14 +1858,7 @@ function mountImperativeHandle<T>(
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,
Expand Down

0 comments on commit b36f722

Please sign in to comment.