Remove ReactFiberFlags MountLayoutDev and MountPassiveDev (#25091)
Samuel Susla committed
Aug 25, 2022 at 20:23 UTC
b36f7223573c23da8ed794fcac81c607c389fe5f
5 files changed
+59
-241
packages/react-reconciler/src/ReactFiberClassComponent.new.js
+6
-45
@@ -13,19 +13,13 @@ import type {UpdateQueue} from './ReactFiberClassUpdateQueue.new';
13
import type {Flags} from './ReactFiberFlags';
14
15
import * as React from 'react';
16
-import {
17
- LayoutStatic,
18
- MountLayoutDev,
19
- Update,
20
- Snapshot,
21
-} from './ReactFiberFlags';
16
+import {LayoutStatic, Update, Snapshot} from './ReactFiberFlags';
17
import {
18
debugRenderPhaseSideEffectsForStrictMode,
19
disableLegacyContext,
20
enableDebugTracing,
21
enableSchedulingProfiler,
22
warnAboutDeprecatedLifecycles,
28
- enableStrictEffects,
23
enableLazyContextPropagation,
24
} from 'shared/ReactFeatureFlags';
25
import ReactStrictModeWarnings from './ReactStrictModeWarnings.new';
@@ -39,12 +33,7 @@ import isArray from 'shared/isArray';
33
import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared/ReactSymbols';
34
35
import {resolveDefaultProps} from './ReactFiberLazyComponent.new';
42
-import {
43
- DebugTracingMode,
44
- NoMode,
45
- StrictLegacyMode,
46
- StrictEffectsMode,
47
-} from './ReactTypeOfMode';
36
+import {DebugTracingMode, StrictLegacyMode} from './ReactTypeOfMode';
37
38
import {
39
enqueueUpdate,
@@ -907,14 +896,7 @@ function mountClassInstance(
896
}
897
898
if (typeof instance.componentDidMount === 'function') {
910
- let fiberFlags: Flags = Update | LayoutStatic;
911
- if (
912
- __DEV__ &&
913
- enableStrictEffects &&
914
- (workInProgress.mode & StrictEffectsMode) !== NoMode
915
- ) {
916
- fiberFlags |= MountLayoutDev;
917
- }
899
+ const fiberFlags: Flags = Update | LayoutStatic;
900
workInProgress.flags |= fiberFlags;
901
}
902
}
@@ -985,14 +967,7 @@ function resumeMountClassInstance(
967
// If an update was already in progress, we should schedule an Update
968
// effect even though we're bailing out, so that cWU/cDU are called.
969
if (typeof instance.componentDidMount === 'function') {
988
- let fiberFlags: Flags = Update | LayoutStatic;
989
- if (
990
- __DEV__ &&
991
- enableStrictEffects &&
992
- (workInProgress.mode & StrictEffectsMode) !== NoMode
993
- ) {
994
- fiberFlags |= MountLayoutDev;
995
- }
970
+ const fiberFlags: Flags = Update | LayoutStatic;
971
workInProgress.flags |= fiberFlags;
972
}
973
return false;
@@ -1036,28 +1011,14 @@ function resumeMountClassInstance(
1011
}
1012
}
1013
if (typeof instance.componentDidMount === 'function') {
1039
- let fiberFlags: Flags = Update | LayoutStatic;
1040
- if (
1041
- __DEV__ &&
1042
- enableStrictEffects &&
1043
- (workInProgress.mode & StrictEffectsMode) !== NoMode
1044
- ) {
1045
- fiberFlags |= MountLayoutDev;
1046
- }
1014
+ const fiberFlags: Flags = Update | LayoutStatic;
1015
workInProgress.flags |= fiberFlags;
1016
}
1017
} else {
1018
// If an update was already in progress, we should schedule an Update
1019
// effect even though we're bailing out, so that cWU/cDU are called.
1020
if (typeof instance.componentDidMount === 'function') {
1053
- let fiberFlags: Flags = Update | LayoutStatic;
1054
- if (
1055
- __DEV__ &&
1056
- enableStrictEffects &&
1057
- (workInProgress.mode & StrictEffectsMode) !== NoMode
1058
- ) {
1059
- fiberFlags |= MountLayoutDev;
1060
- }
1021
+ const fiberFlags: Flags = Update | LayoutStatic;
1022
workInProgress.flags |= fiberFlags;
1023
}
1024
packages/react-reconciler/src/ReactFiberClassComponent.old.js
+6
-45
@@ -13,19 +13,13 @@ import type {UpdateQueue} from './ReactFiberClassUpdateQueue.old';
13
import type {Flags} from './ReactFiberFlags';
14
15
import * as React from 'react';
16
-import {
17
- LayoutStatic,
18
- MountLayoutDev,
19
- Update,
20
- Snapshot,
21
-} from './ReactFiberFlags';
16
+import {LayoutStatic, Update, Snapshot} from './ReactFiberFlags';
17
import {
18
debugRenderPhaseSideEffectsForStrictMode,
19
disableLegacyContext,
20
enableDebugTracing,
21
enableSchedulingProfiler,
22
warnAboutDeprecatedLifecycles,
28
- enableStrictEffects,
23
enableLazyContextPropagation,
24
} from 'shared/ReactFeatureFlags';
25
import ReactStrictModeWarnings from './ReactStrictModeWarnings.old';
@@ -39,12 +33,7 @@ import isArray from 'shared/isArray';
33
import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared/ReactSymbols';
34
35
import {resolveDefaultProps} from './ReactFiberLazyComponent.old';
42
-import {
43
- DebugTracingMode,
44
- NoMode,
45
- StrictLegacyMode,
46
- StrictEffectsMode,
47
-} from './ReactTypeOfMode';
36
+import {DebugTracingMode, StrictLegacyMode} from './ReactTypeOfMode';
37
38
import {
39
enqueueUpdate,
@@ -907,14 +896,7 @@ function mountClassInstance(
896
}
897
898
if (typeof instance.componentDidMount === 'function') {
910
- let fiberFlags: Flags = Update | LayoutStatic;
911
- if (
912
- __DEV__ &&
913
- enableStrictEffects &&
914
- (workInProgress.mode & StrictEffectsMode) !== NoMode
915
- ) {
916
- fiberFlags |= MountLayoutDev;
917
- }
899
+ const fiberFlags: Flags = Update | LayoutStatic;
900
workInProgress.flags |= fiberFlags;
901
}
902
}
@@ -985,14 +967,7 @@ function resumeMountClassInstance(
967
// If an update was already in progress, we should schedule an Update
968
// effect even though we're bailing out, so that cWU/cDU are called.
969
if (typeof instance.componentDidMount === 'function') {
988
- let fiberFlags: Flags = Update | LayoutStatic;
989
- if (
990
- __DEV__ &&
991
- enableStrictEffects &&
992
- (workInProgress.mode & StrictEffectsMode) !== NoMode
993
- ) {
994
- fiberFlags |= MountLayoutDev;
995
- }
970
+ const fiberFlags: Flags = Update | LayoutStatic;
971
workInProgress.flags |= fiberFlags;
972
}
973
return false;
@@ -1036,28 +1011,14 @@ function resumeMountClassInstance(
1011
}
1012
}
1013
if (typeof instance.componentDidMount === 'function') {
1039
- let fiberFlags: Flags = Update | LayoutStatic;
1040
- if (
1041
- __DEV__ &&
1042
- enableStrictEffects &&
1043
- (workInProgress.mode & StrictEffectsMode) !== NoMode
1044
- ) {
1045
- fiberFlags |= MountLayoutDev;
1046
- }
1014
+ const fiberFlags: Flags = Update | LayoutStatic;
1015
workInProgress.flags |= fiberFlags;
1016
}
1017
} else {
1018
// If an update was already in progress, we should schedule an Update
1019
// effect even though we're bailing out, so that cWU/cDU are called.
1020
if (typeof instance.componentDidMount === 'function') {
1053
- let fiberFlags: Flags = Update | LayoutStatic;
1054
- if (
1055
- __DEV__ &&
1056
- enableStrictEffects &&
1057
- (workInProgress.mode & StrictEffectsMode) !== NoMode
1058
- ) {
1059
- fiberFlags |= MountLayoutDev;
1060
- }
1021
+ const fiberFlags: Flags = Update | LayoutStatic;
1022
workInProgress.flags |= fiberFlags;
1023
}
1024
packages/react-reconciler/src/ReactFiberFlags.js
+27
-31
@@ -12,53 +12,49 @@ import {enableCreateEventHandleAPI} from 'shared/ReactFeatureFlags';
12
export type Flags = number;
13
14
// Don't change these two values. They're used by React Dev Tools.
15
-export const NoFlags = /* */ 0b00000000000000000000000000;
16
-export const PerformedWork = /* */ 0b00000000000000000000000001;
15
+export const NoFlags = /* */ 0b000000000000000000000000;
16
+export const PerformedWork = /* */ 0b000000000000000000000001;
17
18
// You can change the rest (and add more).
19
-export const Placement = /* */ 0b00000000000000000000000010;
20
-export const Update = /* */ 0b00000000000000000000000100;
21
-export const ChildDeletion = /* */ 0b00000000000000000000001000;
22
-export const ContentReset = /* */ 0b00000000000000000000010000;
23
-export const Callback = /* */ 0b00000000000000000000100000;
24
-export const DidCapture = /* */ 0b00000000000000000001000000;
25
-export const ForceClientRender = /* */ 0b00000000000000000010000000;
26
-export const Ref = /* */ 0b00000000000000000100000000;
27
-export const Snapshot = /* */ 0b00000000000000001000000000;
28
-export const Passive = /* */ 0b00000000000000010000000000;
29
-export const Hydrating = /* */ 0b00000000000000100000000000;
30
-export const Visibility = /* */ 0b00000000000001000000000000;
31
-export const StoreConsistency = /* */ 0b00000000000010000000000000;
19
+export const Placement = /* */ 0b000000000000000000000010;
20
+export const Update = /* */ 0b000000000000000000000100;
21
+export const ChildDeletion = /* */ 0b000000000000000000001000;
22
+export const ContentReset = /* */ 0b000000000000000000010000;
23
+export const Callback = /* */ 0b000000000000000000100000;
24
+export const DidCapture = /* */ 0b000000000000000001000000;
25
+export const ForceClientRender = /* */ 0b000000000000000010000000;
26
+export const Ref = /* */ 0b000000000000000100000000;
27
+export const Snapshot = /* */ 0b000000000000001000000000;
28
+export const Passive = /* */ 0b000000000000010000000000;
29
+export const Hydrating = /* */ 0b000000000000100000000000;
30
+export const Visibility = /* */ 0b000000000001000000000000;
31
+export const StoreConsistency = /* */ 0b000000000010000000000000;
32
33
export const LifecycleEffectMask =
34
Passive | Update | Callback | Ref | Snapshot | StoreConsistency;
35
36
// Union of all commit flags (flags with the lifetime of a particular commit)
37
-export const HostEffectMask = /* */ 0b00000000000011111111111111;
37
+export const HostEffectMask = /* */ 0b000000000011111111111111;
38
39
// These are not really side effects, but we still reuse this field.
40
-export const Incomplete = /* */ 0b00000000000100000000000000;
41
-export const ShouldCapture = /* */ 0b00000000001000000000000000;
42
-export const ForceUpdateForLegacySuspense = /* */ 0b00000000010000000000000000;
43
-export const DidPropagateContext = /* */ 0b00000000100000000000000000;
44
-export const NeedsPropagation = /* */ 0b00000001000000000000000000;
45
-export const Forked = /* */ 0b00000010000000000000000000;
40
+export const Incomplete = /* */ 0b000000000100000000000000;
41
+export const ShouldCapture = /* */ 0b000000001000000000000000;
42
+export const ForceUpdateForLegacySuspense = /* */ 0b000000010000000000000000;
43
+export const DidPropagateContext = /* */ 0b000000100000000000000000;
44
+export const NeedsPropagation = /* */ 0b000001000000000000000000;
45
+export const Forked = /* */ 0b000010000000000000000000;
46
47
// Static tags describe aspects of a fiber that are not specific to a render,
48
// e.g. a fiber uses a passive effect (even if there are no updates on this particular render).
49
// This enables us to defer more work in the unmount case,
50
// since we can defer traversing the tree during layout to look for Passive effects,
51
// and instead rely on the static flag as a signal that there may be cleanup work.
52
-export const RefStatic = /* */ 0b00000100000000000000000000;
53
-export const LayoutStatic = /* */ 0b00001000000000000000000000;
54
-export const PassiveStatic = /* */ 0b00010000000000000000000000;
52
+export const RefStatic = /* */ 0b000100000000000000000000;
53
+export const LayoutStatic = /* */ 0b001000000000000000000000;
54
+export const PassiveStatic = /* */ 0b010000000000000000000000;
55
56
-// These flags allow us to traverse to fibers that have effects on mount
57
-// without traversing the entire tree after every commit for
58
-// double invoking
59
-export const MountLayoutDev = /* */ 0b00100000000000000000000000;
60
-export const MountPassiveDev = /* */ 0b01000000000000000000000000;
61
-export const PlacementDEV = /* */ 0b10000000000000000000000000;
56
+// Flag used to identify newly inserted fibers. It isn't reset after commit unlike `Placement`.
57
+export const PlacementDEV = /* */ 0b100000000000000000000000;
58
59
// Groups of flags that are used in the commit phase to skip over trees that
60
// don't contain effects, by checking subtreeFlags.
packages/react-reconciler/src/ReactFiberHooks.new.js
+10
-60
@@ -30,7 +30,6 @@ import {
30
enableNewReconciler,
31
enableCache,
32
enableUseRefAccessWarning,
33
- enableStrictEffects,
33
enableLazyContextPropagation,
34
enableUseMutableSource,
35
enableTransitionTracing,
@@ -38,12 +37,7 @@ import {
37
enableUseMemoCacheHook,
38
} from 'shared/ReactFeatureFlags';
39
41
-import {
42
- NoMode,
43
- ConcurrentMode,
44
- DebugTracingMode,
45
- StrictEffectsMode,
46
-} from './ReactTypeOfMode';
40
+import {NoMode, ConcurrentMode, DebugTracingMode} from './ReactTypeOfMode';
41
import {
42
NoLane,
43
SyncLane,
@@ -71,8 +65,6 @@ import {readContext, checkIfContextChanged} from './ReactFiberNewContext.new';
65
import {HostRoot, CacheComponent} from './ReactWorkTags';
66
import {
67
LayoutStatic as LayoutStaticEffect,
74
- MountLayoutDev as MountLayoutDevEffect,
75
- MountPassiveDev as MountPassiveDevEffect,
68
Passive as PassiveEffect,
69
PassiveStatic as PassiveStaticEffect,
70
StaticMask as StaticMaskEffect,
@@ -583,22 +575,7 @@ export function bailoutHooks(
575
lanes: Lanes,
576
) {
577
workInProgress.updateQueue = current.updateQueue;
586
- // TODO: Don't need to reset the flags here, because they're reset in the
587
- // complete phase (bubbleProperties).
588
- if (
589
- __DEV__ &&
590
- enableStrictEffects &&
591
- (workInProgress.mode & StrictEffectsMode) !== NoMode
592
- ) {
593
- workInProgress.flags &= ~(
594
- MountPassiveDevEffect |
595
- MountLayoutDevEffect |
596
- PassiveEffect |
597
- UpdateEffect
598
- );
599
- } else {
600
- workInProgress.flags &= ~(PassiveEffect | UpdateEffect);
601
- }
578
+ workInProgress.flags &= ~(PassiveEffect | UpdateEffect);
579
current.lanes = removeLanes(current.lanes, lanes);
580
}
581
@@ -1788,25 +1765,12 @@ function mountEffect(
1765
create: () => (() => void) | void,
1766
deps: Array<mixed> | void | null,
1767
): void {
1791
- if (
1792
- __DEV__ &&
1793
- enableStrictEffects &&
1794
- (currentlyRenderingFiber.mode & StrictEffectsMode) !== NoMode
1795
- ) {
1796
- return mountEffectImpl(
1797
- MountPassiveDevEffect | PassiveEffect | PassiveStaticEffect,
1798
- HookPassive,
1799
- create,
1800
- deps,
1801
- );
1802
- } else {
1803
- return mountEffectImpl(
1804
- PassiveEffect | PassiveStaticEffect,
1805
- HookPassive,
1806
- create,
1807
- deps,
1808
- );
1809
- }
1768
+ return mountEffectImpl(
1769
+ PassiveEffect | PassiveStaticEffect,
1770
+ HookPassive,
1771
+ create,
1772
+ deps,
1773
+ );
1774
}
1775
1776
function updateEffect(
@@ -1834,14 +1798,7 @@ function mountLayoutEffect(
1798
create: () => (() => void) | void,
1799
deps: Array<mixed> | void | null,
1800
): void {
1837
- let fiberFlags: Flags = UpdateEffect | LayoutStaticEffect;
1838
- if (
1839
- __DEV__ &&
1840
- enableStrictEffects &&
1841
- (currentlyRenderingFiber.mode & StrictEffectsMode) !== NoMode
1842
- ) {
1843
- fiberFlags |= MountLayoutDevEffect;
1844
- }
1801
+ const fiberFlags: Flags = UpdateEffect | LayoutStaticEffect;
1802
return mountEffectImpl(fiberFlags, HookLayout, create, deps);
1803
}
1804
@@ -1901,14 +1858,7 @@ function mountImperativeHandle<T>(
1858
const effectDeps =
1859
deps !== null && deps !== undefined ? deps.concat([ref]) : null;
1860
1904
- let fiberFlags: Flags = UpdateEffect | LayoutStaticEffect;
1905
- if (
1906
- __DEV__ &&
1907
- enableStrictEffects &&
1908
- (currentlyRenderingFiber.mode & StrictEffectsMode) !== NoMode
1909
- ) {
1910
- fiberFlags |= MountLayoutDevEffect;
1911
- }
1861
+ const fiberFlags: Flags = UpdateEffect | LayoutStaticEffect;
1862
return mountEffectImpl(
1863
fiberFlags,
1864
HookLayout,
packages/react-reconciler/src/ReactFiberHooks.old.js
+10
-60
@@ -30,7 +30,6 @@ import {
30
enableNewReconciler,
31
enableCache,
32
enableUseRefAccessWarning,
33
- enableStrictEffects,
33
enableLazyContextPropagation,
34
enableUseMutableSource,
35
enableTransitionTracing,
@@ -38,12 +37,7 @@ import {
37
enableUseMemoCacheHook,
38
} from 'shared/ReactFeatureFlags';
39
41
-import {
42
- NoMode,
43
- ConcurrentMode,
44
- DebugTracingMode,
45
- StrictEffectsMode,
46
-} from './ReactTypeOfMode';
40
+import {NoMode, ConcurrentMode, DebugTracingMode} from './ReactTypeOfMode';
41
import {
42
NoLane,
43
SyncLane,
@@ -71,8 +65,6 @@ import {readContext, checkIfContextChanged} from './ReactFiberNewContext.old';
65
import {HostRoot, CacheComponent} from './ReactWorkTags';
66
import {
67
LayoutStatic as LayoutStaticEffect,
74
- MountLayoutDev as MountLayoutDevEffect,
75
- MountPassiveDev as MountPassiveDevEffect,
68
Passive as PassiveEffect,
69
PassiveStatic as PassiveStaticEffect,
70
StaticMask as StaticMaskEffect,
@@ -583,22 +575,7 @@ export function bailoutHooks(
575
lanes: Lanes,
576
) {
577
workInProgress.updateQueue = current.updateQueue;
586
- // TODO: Don't need to reset the flags here, because they're reset in the
587
- // complete phase (bubbleProperties).
588
- if (
589
- __DEV__ &&
590
- enableStrictEffects &&
591
- (workInProgress.mode & StrictEffectsMode) !== NoMode
592
- ) {
593
- workInProgress.flags &= ~(
594
- MountPassiveDevEffect |
595
- MountLayoutDevEffect |
596
- PassiveEffect |
597
- UpdateEffect
598
- );
599
- } else {
600
- workInProgress.flags &= ~(PassiveEffect | UpdateEffect);
601
- }
578
+ workInProgress.flags &= ~(PassiveEffect | UpdateEffect);
579
current.lanes = removeLanes(current.lanes, lanes);
580
}
581
@@ -1788,25 +1765,12 @@ function mountEffect(
1765
create: () => (() => void) | void,
1766
deps: Array<mixed> | void | null,
1767
): void {
1791
- if (
1792
- __DEV__ &&
1793
- enableStrictEffects &&
1794
- (currentlyRenderingFiber.mode & StrictEffectsMode) !== NoMode
1795
- ) {
1796
- return mountEffectImpl(
1797
- MountPassiveDevEffect | PassiveEffect | PassiveStaticEffect,
1798
- HookPassive,
1799
- create,
1800
- deps,
1801
- );
1802
- } else {
1803
- return mountEffectImpl(
1804
- PassiveEffect | PassiveStaticEffect,
1805
- HookPassive,
1806
- create,
1807
- deps,
1808
- );
1809
- }
1768
+ return mountEffectImpl(
1769
+ PassiveEffect | PassiveStaticEffect,
1770
+ HookPassive,
1771
+ create,
1772
+ deps,
1773
+ );
1774
}
1775
1776
function updateEffect(
@@ -1834,14 +1798,7 @@ function mountLayoutEffect(
1798
create: () => (() => void) | void,
1799
deps: Array<mixed> | void | null,
1800
): void {
1837
- let fiberFlags: Flags = UpdateEffect | LayoutStaticEffect;
1838
- if (
1839
- __DEV__ &&
1840
- enableStrictEffects &&
1841
- (currentlyRenderingFiber.mode & StrictEffectsMode) !== NoMode
1842
- ) {
1843
- fiberFlags |= MountLayoutDevEffect;
1844
- }
1801
+ const fiberFlags: Flags = UpdateEffect | LayoutStaticEffect;
1802
return mountEffectImpl(fiberFlags, HookLayout, create, deps);
1803
}
1804
@@ -1901,14 +1858,7 @@ function mountImperativeHandle<T>(
1858
const effectDeps =
1859
deps !== null && deps !== undefined ? deps.concat([ref]) : null;
1860
1904
- let fiberFlags: Flags = UpdateEffect | LayoutStaticEffect;
1905
- if (
1906
- __DEV__ &&
1907
- enableStrictEffects &&
1908
- (currentlyRenderingFiber.mode & StrictEffectsMode) !== NoMode
1909
- ) {
1910
- fiberFlags |= MountLayoutDevEffect;
1911
- }
1861
+ const fiberFlags: Flags = UpdateEffect | LayoutStaticEffect;
1862
return mountEffectImpl(
1863
fiberFlags,
1864
HookLayout,