Skip to content

Commit a8c9cb1

Browse files
acdliteacdlite
authored
Land enableSuspenseLayoutEffectSemantics flag (#24713)
This was released to open source in 18.0 and is already hardcoded to true in www.
1 parent f7b4453 commit a8c9cb1

24 files changed

Lines changed: 59 additions & 219 deletions

‎packages/react-reconciler/src/ReactFiberBeginWork.new.js‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,6 @@ import {
100100
enableScopeAPI,
101101
enableCache,
102102
enableLazyContextPropagation,
103-
enableSuspenseLayoutEffectSemantics,
104103
enableSchedulingProfiler,
105104
enableTransitionTracing,
106105
enableLegacyHidden,
@@ -944,9 +943,7 @@ function markRef(current: Fiber | null, workInProgress: Fiber) {
944943
) {
945944
// Schedule a Ref effect
946945
workInProgress.flags |= Ref;
947-
if (enableSuspenseLayoutEffectSemantics) {
948-
workInProgress.flags |= RefStatic;
949-
}
946+
workInProgress.flags |= RefStatic;
950947
}
951948
}
952949

‎packages/react-reconciler/src/ReactFiberBeginWork.old.js‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,6 @@ import {
100100
enableScopeAPI,
101101
enableCache,
102102
enableLazyContextPropagation,
103-
enableSuspenseLayoutEffectSemantics,
104103
enableSchedulingProfiler,
105104
enableTransitionTracing,
106105
enableLegacyHidden,
@@ -944,9 +943,7 @@ function markRef(current: Fiber | null, workInProgress: Fiber) {
944943
) {
945944
// Schedule a Ref effect
946945
workInProgress.flags |= Ref;
947-
if (enableSuspenseLayoutEffectSemantics) {
948-
workInProgress.flags |= RefStatic;
949-
}
946+
workInProgress.flags |= RefStatic;
950947
}
951948
}
952949

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

Lines changed: 4 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@ import {
2727
warnAboutDeprecatedLifecycles,
2828
enableStrictEffects,
2929
enableLazyContextPropagation,
30-
enableSuspenseLayoutEffectSemantics,
3130
} from 'shared/ReactFeatureFlags';
3231
import ReactStrictModeWarnings from './ReactStrictModeWarnings.new';
3332
import {isMounted} from './ReactFiberTreeReflection';
@@ -908,10 +907,7 @@ function mountClassInstance(
908907
}
909908

910909
if (typeof instance.componentDidMount === 'function') {
911-
let fiberFlags: Flags = Update;
912-
if (enableSuspenseLayoutEffectSemantics) {
913-
fiberFlags |= LayoutStatic;
914-
}
910+
let fiberFlags: Flags = Update | LayoutStatic;
915911
if (
916912
__DEV__ &&
917913
enableStrictEffects &&
@@ -989,10 +985,7 @@ function resumeMountClassInstance(
989985
// If an update was already in progress, we should schedule an Update
990986
// effect even though we're bailing out, so that cWU/cDU are called.
991987
if (typeof instance.componentDidMount === 'function') {
992-
let fiberFlags: Flags = Update;
993-
if (enableSuspenseLayoutEffectSemantics) {
994-
fiberFlags |= LayoutStatic;
995-
}
988+
let fiberFlags: Flags = Update | LayoutStatic;
996989
if (
997990
__DEV__ &&
998991
enableStrictEffects &&
@@ -1043,10 +1036,7 @@ function resumeMountClassInstance(
10431036
}
10441037
}
10451038
if (typeof instance.componentDidMount === 'function') {
1046-
let fiberFlags: Flags = Update;
1047-
if (enableSuspenseLayoutEffectSemantics) {
1048-
fiberFlags |= LayoutStatic;
1049-
}
1039+
let fiberFlags: Flags = Update | LayoutStatic;
10501040
if (
10511041
__DEV__ &&
10521042
enableStrictEffects &&
@@ -1060,10 +1050,7 @@ function resumeMountClassInstance(
10601050
// If an update was already in progress, we should schedule an Update
10611051
// effect even though we're bailing out, so that cWU/cDU are called.
10621052
if (typeof instance.componentDidMount === 'function') {
1063-
let fiberFlags: Flags = Update;
1064-
if (enableSuspenseLayoutEffectSemantics) {
1065-
fiberFlags |= LayoutStatic;
1066-
}
1053+
let fiberFlags: Flags = Update | LayoutStatic;
10671054
if (
10681055
__DEV__ &&
10691056
enableStrictEffects &&

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

Lines changed: 4 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@ import {
2727
warnAboutDeprecatedLifecycles,
2828
enableStrictEffects,
2929
enableLazyContextPropagation,
30-
enableSuspenseLayoutEffectSemantics,
3130
} from 'shared/ReactFeatureFlags';
3231
import ReactStrictModeWarnings from './ReactStrictModeWarnings.old';
3332
import {isMounted} from './ReactFiberTreeReflection';
@@ -908,10 +907,7 @@ function mountClassInstance(
908907
}
909908

910909
if (typeof instance.componentDidMount === 'function') {
911-
let fiberFlags: Flags = Update;
912-
if (enableSuspenseLayoutEffectSemantics) {
913-
fiberFlags |= LayoutStatic;
914-
}
910+
let fiberFlags: Flags = Update | LayoutStatic;
915911
if (
916912
__DEV__ &&
917913
enableStrictEffects &&
@@ -989,10 +985,7 @@ function resumeMountClassInstance(
989985
// If an update was already in progress, we should schedule an Update
990986
// effect even though we're bailing out, so that cWU/cDU are called.
991987
if (typeof instance.componentDidMount === 'function') {
992-
let fiberFlags: Flags = Update;
993-
if (enableSuspenseLayoutEffectSemantics) {
994-
fiberFlags |= LayoutStatic;
995-
}
988+
let fiberFlags: Flags = Update | LayoutStatic;
996989
if (
997990
__DEV__ &&
998991
enableStrictEffects &&
@@ -1043,10 +1036,7 @@ function resumeMountClassInstance(
10431036
}
10441037
}
10451038
if (typeof instance.componentDidMount === 'function') {
1046-
let fiberFlags: Flags = Update;
1047-
if (enableSuspenseLayoutEffectSemantics) {
1048-
fiberFlags |= LayoutStatic;
1049-
}
1039+
let fiberFlags: Flags = Update | LayoutStatic;
10501040
if (
10511041
__DEV__ &&
10521042
enableStrictEffects &&
@@ -1060,10 +1050,7 @@ function resumeMountClassInstance(
10601050
// If an update was already in progress, we should schedule an Update
10611051
// effect even though we're bailing out, so that cWU/cDU are called.
10621052
if (typeof instance.componentDidMount === 'function') {
1063-
let fiberFlags: Flags = Update;
1064-
if (enableSuspenseLayoutEffectSemantics) {
1065-
fiberFlags |= LayoutStatic;
1066-
}
1053+
let fiberFlags: Flags = Update | LayoutStatic;
10671054
if (
10681055
__DEV__ &&
10691056
enableStrictEffects &&

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

Lines changed: 18 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,6 @@ import {
4141
enableScopeAPI,
4242
enableStrictEffects,
4343
deletedTreeCleanUpLevel,
44-
enableSuspenseLayoutEffectSemantics,
4544
enableUpdaterTracking,
4645
enableCache,
4746
enableTransitionTracing,
@@ -173,7 +172,6 @@ if (__DEV__) {
173172

174173
// Used during the commit phase to track the state of the Offscreen component stack.
175174
// Allows us to avoid traversing the return path to find the nearest Offscreen ancestor.
176-
// Only used when enableSuspenseLayoutEffectSemantics is enabled.
177175
let offscreenSubtreeIsHidden: boolean = false;
178176
let offscreenSubtreeWasHidden: boolean = false;
179177

@@ -710,10 +708,7 @@ function commitLayoutEffectOnFiber(
710708
case FunctionComponent:
711709
case ForwardRef:
712710
case SimpleMemoComponent: {
713-
if (
714-
!enableSuspenseLayoutEffectSemantics ||
715-
!offscreenSubtreeWasHidden
716-
) {
711+
if (!offscreenSubtreeWasHidden) {
717712
// At this point layout effects have already been destroyed (during mutation phase).
718713
// This is done to prevent sibling component effects from interfering with each other,
719714
// e.g. a destroy function in one component should never override a ref set
@@ -1018,7 +1013,7 @@ function commitLayoutEffectOnFiber(
10181013
}
10191014
}
10201015

1021-
if (!enableSuspenseLayoutEffectSemantics || !offscreenSubtreeWasHidden) {
1016+
if (!offscreenSubtreeWasHidden) {
10221017
if (enableScopeAPI) {
10231018
// TODO: This is a temporary solution that allowed us to transition away
10241019
// from React Flare on www.
@@ -1889,11 +1884,7 @@ function commitDeletionEffectsOnFiber(
18891884
return;
18901885
}
18911886
case OffscreenComponent: {
1892-
if (
1893-
// TODO: Remove this dead flag
1894-
enableSuspenseLayoutEffectSemantics &&
1895-
deletedFiber.mode & ConcurrentMode
1896-
) {
1887+
if (deletedFiber.mode & ConcurrentMode) {
18971888
// If this offscreen component is hidden, we already unmounted it. Before
18981889
// deleting the children, track that it's already unmounted so that we
18991890
// don't attempt to unmount the effects again.
@@ -2341,11 +2332,7 @@ function commitMutationEffectsOnFiber(
23412332
case OffscreenComponent: {
23422333
const wasHidden = current !== null && current.memoizedState !== null;
23432334

2344-
if (
2345-
// TODO: Remove this dead flag
2346-
enableSuspenseLayoutEffectSemantics &&
2347-
finishedWork.mode & ConcurrentMode
2348-
) {
2335+
if (finishedWork.mode & ConcurrentMode) {
23492336
// Before committing the children, track on the stack whether this
23502337
// offscreen subtree was already hidden, so that we don't unmount the
23512338
// effects again.
@@ -2369,23 +2356,21 @@ function commitMutationEffectsOnFiber(
23692356
// read it during an event
23702357
offscreenInstance.isHidden = isHidden;
23712358

2372-
if (enableSuspenseLayoutEffectSemantics) {
2373-
if (isHidden) {
2374-
if (!wasHidden) {
2375-
if ((offscreenBoundary.mode & ConcurrentMode) !== NoMode) {
2376-
nextEffect = offscreenBoundary;
2377-
let offscreenChild = offscreenBoundary.child;
2378-
while (offscreenChild !== null) {
2379-
nextEffect = offscreenChild;
2380-
disappearLayoutEffects_begin(offscreenChild);
2381-
offscreenChild = offscreenChild.sibling;
2382-
}
2359+
if (isHidden) {
2360+
if (!wasHidden) {
2361+
if ((offscreenBoundary.mode & ConcurrentMode) !== NoMode) {
2362+
nextEffect = offscreenBoundary;
2363+
let offscreenChild = offscreenBoundary.child;
2364+
while (offscreenChild !== null) {
2365+
nextEffect = offscreenChild;
2366+
disappearLayoutEffects_begin(offscreenChild);
2367+
offscreenChild = offscreenChild.sibling;
23832368
}
23842369
}
2385-
} else {
2386-
if (wasHidden) {
2387-
// TODO: Move re-appear call here for symmetry?
2388-
}
2370+
}
2371+
} else {
2372+
if (wasHidden) {
2373+
// TODO: Move re-appear call here for symmetry?
23892374
}
23902375
}
23912376

@@ -2483,11 +2468,7 @@ function commitLayoutEffects_begin(
24832468
const fiber = nextEffect;
24842469
const firstChild = fiber.child;
24852470

2486-
if (
2487-
enableSuspenseLayoutEffectSemantics &&
2488-
fiber.tag === OffscreenComponent &&
2489-
isModernRoot
2490-
) {
2471+
if (fiber.tag === OffscreenComponent && isModernRoot) {
24912472
// Keep track of the current Offscreen stack's state.
24922473
const isHidden = fiber.memoizedState !== null;
24932474
const newOffscreenSubtreeIsHidden = isHidden || offscreenSubtreeIsHidden;

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

Lines changed: 18 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,6 @@ import {
4141
enableScopeAPI,
4242
enableStrictEffects,
4343
deletedTreeCleanUpLevel,
44-
enableSuspenseLayoutEffectSemantics,
4544
enableUpdaterTracking,
4645
enableCache,
4746
enableTransitionTracing,
@@ -173,7 +172,6 @@ if (__DEV__) {
173172

174173
// Used during the commit phase to track the state of the Offscreen component stack.
175174
// Allows us to avoid traversing the return path to find the nearest Offscreen ancestor.
176-
// Only used when enableSuspenseLayoutEffectSemantics is enabled.
177175
let offscreenSubtreeIsHidden: boolean = false;
178176
let offscreenSubtreeWasHidden: boolean = false;
179177

@@ -710,10 +708,7 @@ function commitLayoutEffectOnFiber(
710708
case FunctionComponent:
711709
case ForwardRef:
712710
case SimpleMemoComponent: {
713-
if (
714-
!enableSuspenseLayoutEffectSemantics ||
715-
!offscreenSubtreeWasHidden
716-
) {
711+
if (!offscreenSubtreeWasHidden) {
717712
// At this point layout effects have already been destroyed (during mutation phase).
718713
// This is done to prevent sibling component effects from interfering with each other,
719714
// e.g. a destroy function in one component should never override a ref set
@@ -1018,7 +1013,7 @@ function commitLayoutEffectOnFiber(
10181013
}
10191014
}
10201015

1021-
if (!enableSuspenseLayoutEffectSemantics || !offscreenSubtreeWasHidden) {
1016+
if (!offscreenSubtreeWasHidden) {
10221017
if (enableScopeAPI) {
10231018
// TODO: This is a temporary solution that allowed us to transition away
10241019
// from React Flare on www.
@@ -1889,11 +1884,7 @@ function commitDeletionEffectsOnFiber(
18891884
return;
18901885
}
18911886
case OffscreenComponent: {
1892-
if (
1893-
// TODO: Remove this dead flag
1894-
enableSuspenseLayoutEffectSemantics &&
1895-
deletedFiber.mode & ConcurrentMode
1896-
) {
1887+
if (deletedFiber.mode & ConcurrentMode) {
18971888
// If this offscreen component is hidden, we already unmounted it. Before
18981889
// deleting the children, track that it's already unmounted so that we
18991890
// don't attempt to unmount the effects again.
@@ -2341,11 +2332,7 @@ function commitMutationEffectsOnFiber(
23412332
case OffscreenComponent: {
23422333
const wasHidden = current !== null && current.memoizedState !== null;
23432334

2344-
if (
2345-
// TODO: Remove this dead flag
2346-
enableSuspenseLayoutEffectSemantics &&
2347-
finishedWork.mode & ConcurrentMode
2348-
) {
2335+
if (finishedWork.mode & ConcurrentMode) {
23492336
// Before committing the children, track on the stack whether this
23502337
// offscreen subtree was already hidden, so that we don't unmount the
23512338
// effects again.
@@ -2369,23 +2356,21 @@ function commitMutationEffectsOnFiber(
23692356
// read it during an event
23702357
offscreenInstance.isHidden = isHidden;
23712358

2372-
if (enableSuspenseLayoutEffectSemantics) {
2373-
if (isHidden) {
2374-
if (!wasHidden) {
2375-
if ((offscreenBoundary.mode & ConcurrentMode) !== NoMode) {
2376-
nextEffect = offscreenBoundary;
2377-
let offscreenChild = offscreenBoundary.child;
2378-
while (offscreenChild !== null) {
2379-
nextEffect = offscreenChild;
2380-
disappearLayoutEffects_begin(offscreenChild);
2381-
offscreenChild = offscreenChild.sibling;
2382-
}
2359+
if (isHidden) {
2360+
if (!wasHidden) {
2361+
if ((offscreenBoundary.mode & ConcurrentMode) !== NoMode) {
2362+
nextEffect = offscreenBoundary;
2363+
let offscreenChild = offscreenBoundary.child;
2364+
while (offscreenChild !== null) {
2365+
nextEffect = offscreenChild;
2366+
disappearLayoutEffects_begin(offscreenChild);
2367+
offscreenChild = offscreenChild.sibling;
23832368
}
23842369
}
2385-
} else {
2386-
if (wasHidden) {
2387-
// TODO: Move re-appear call here for symmetry?
2388-
}
2370+
}
2371+
} else {
2372+
if (wasHidden) {
2373+
// TODO: Move re-appear call here for symmetry?
23892374
}
23902375
}
23912376

@@ -2483,11 +2468,7 @@ function commitLayoutEffects_begin(
24832468
const fiber = nextEffect;
24842469
const firstChild = fiber.child;
24852470

2486-
if (
2487-
enableSuspenseLayoutEffectSemantics &&
2488-
fiber.tag === OffscreenComponent &&
2489-
isModernRoot
2490-
) {
2471+
if (fiber.tag === OffscreenComponent && isModernRoot) {
24912472
// Keep track of the current Offscreen stack's state.
24922473
const isHidden = fiber.memoizedState !== null;
24932474
const newOffscreenSubtreeIsHidden = isHidden || offscreenSubtreeIsHidden;

‎packages/react-reconciler/src/ReactFiberCompleteWork.new.js‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,6 @@ import {
140140
enableScopeAPI,
141141
enableProfilerTimer,
142142
enableCache,
143-
enableSuspenseLayoutEffectSemantics,
144143
enableTransitionTracing,
145144
} from 'shared/ReactFeatureFlags';
146145
import {
@@ -174,10 +173,7 @@ function markUpdate(workInProgress: Fiber) {
174173
}
175174

176175
function markRef(workInProgress: Fiber) {
177-
workInProgress.flags |= Ref;
178-
if (enableSuspenseLayoutEffectSemantics) {
179-
workInProgress.flags |= RefStatic;
180-
}
176+
workInProgress.flags |= Ref | RefStatic;
181177
}
182178

183179
function hadNoMutationsEffects(current: null | Fiber, completedWork: Fiber) {

0 commit comments

Comments
 (0)