From 1a98da8f2d9849037a914c4535d4cccc79c5ec9b Mon Sep 17 00:00:00 2001 From: Andrew Clark Date: Sun, 12 Jun 2022 18:09:31 -0400 Subject: [PATCH] Land enableSuspenseLayoutEffectSemantics flag This was released to open source in 18.0 and is already hardcoded to true in www. --- .../src/ReactFiberBeginWork.new.js | 5 +- .../src/ReactFiberBeginWork.old.js | 5 +- .../src/ReactFiberClassComponent.new.js | 21 ++----- .../src/ReactFiberClassComponent.old.js | 21 ++----- .../src/ReactFiberCommitWork.new.js | 55 ++++++------------- .../src/ReactFiberCommitWork.old.js | 55 ++++++------------- .../src/ReactFiberCompleteWork.new.js | 6 +- .../src/ReactFiberCompleteWork.old.js | 6 +- .../src/ReactFiberHooks.new.js | 11 +--- .../src/ReactFiberHooks.old.js | 11 +--- .../src/__tests__/ReactLazy-test.internal.js | 29 +++------- .../src/__tests__/ReactOffscreen-test.js | 4 -- .../__tests__/ReactSuspense-test.internal.js | 1 - .../ReactSuspenseEffectsSemantics-test.js | 20 ------- .../ReactSuspenseFuzz-test.internal.js | 12 ---- packages/shared/ReactFeatureFlags.js | 8 --- .../forks/ReactFeatureFlags.native-fb.js | 1 - .../forks/ReactFeatureFlags.native-oss.js | 1 - .../forks/ReactFeatureFlags.test-renderer.js | 1 - .../ReactFeatureFlags.test-renderer.native.js | 1 - .../ReactFeatureFlags.test-renderer.www.js | 1 - .../shared/forks/ReactFeatureFlags.testing.js | 1 - .../forks/ReactFeatureFlags.testing.www.js | 1 - .../shared/forks/ReactFeatureFlags.www.js | 1 - 24 files changed, 59 insertions(+), 219 deletions(-) diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js index bda70790734dc..f8f95260fda62 100644 --- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js +++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js @@ -100,7 +100,6 @@ import { enableScopeAPI, enableCache, enableLazyContextPropagation, - enableSuspenseLayoutEffectSemantics, enableSchedulingProfiler, enableTransitionTracing, enableLegacyHidden, @@ -942,9 +941,7 @@ function markRef(current: Fiber | null, workInProgress: Fiber) { ) { // Schedule a Ref effect workInProgress.flags |= Ref; - if (enableSuspenseLayoutEffectSemantics) { - workInProgress.flags |= RefStatic; - } + workInProgress.flags |= RefStatic; } } diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js index 5050ae80d85ce..6556d21edc2e9 100644 --- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js +++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js @@ -100,7 +100,6 @@ import { enableScopeAPI, enableCache, enableLazyContextPropagation, - enableSuspenseLayoutEffectSemantics, enableSchedulingProfiler, enableTransitionTracing, enableLegacyHidden, @@ -942,9 +941,7 @@ function markRef(current: Fiber | null, workInProgress: Fiber) { ) { // Schedule a Ref effect workInProgress.flags |= Ref; - if (enableSuspenseLayoutEffectSemantics) { - workInProgress.flags |= RefStatic; - } + workInProgress.flags |= RefStatic; } } diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.new.js b/packages/react-reconciler/src/ReactFiberClassComponent.new.js index 45977bfa6fee8..c0a3418c93ba1 100644 --- a/packages/react-reconciler/src/ReactFiberClassComponent.new.js +++ b/packages/react-reconciler/src/ReactFiberClassComponent.new.js @@ -27,7 +27,6 @@ import { warnAboutDeprecatedLifecycles, enableStrictEffects, enableLazyContextPropagation, - enableSuspenseLayoutEffectSemantics, } from 'shared/ReactFeatureFlags'; import ReactStrictModeWarnings from './ReactStrictModeWarnings.new'; import {isMounted} from './ReactFiberTreeReflection'; @@ -908,10 +907,7 @@ function mountClassInstance( } if (typeof instance.componentDidMount === 'function') { - let fiberFlags: Flags = Update; - if (enableSuspenseLayoutEffectSemantics) { - fiberFlags |= LayoutStatic; - } + let fiberFlags: Flags = Update | LayoutStatic; if ( __DEV__ && enableStrictEffects && @@ -989,10 +985,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; - if (enableSuspenseLayoutEffectSemantics) { - fiberFlags |= LayoutStatic; - } + let fiberFlags: Flags = Update | LayoutStatic; if ( __DEV__ && enableStrictEffects && @@ -1043,10 +1036,7 @@ function resumeMountClassInstance( } } if (typeof instance.componentDidMount === 'function') { - let fiberFlags: Flags = Update; - if (enableSuspenseLayoutEffectSemantics) { - fiberFlags |= LayoutStatic; - } + let fiberFlags: Flags = Update | LayoutStatic; if ( __DEV__ && enableStrictEffects && @@ -1060,10 +1050,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; - if (enableSuspenseLayoutEffectSemantics) { - fiberFlags |= LayoutStatic; - } + let fiberFlags: Flags = Update | LayoutStatic; if ( __DEV__ && enableStrictEffects && diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.old.js b/packages/react-reconciler/src/ReactFiberClassComponent.old.js index a921cf2f47ba9..aa709f7ad6cf2 100644 --- a/packages/react-reconciler/src/ReactFiberClassComponent.old.js +++ b/packages/react-reconciler/src/ReactFiberClassComponent.old.js @@ -27,7 +27,6 @@ import { warnAboutDeprecatedLifecycles, enableStrictEffects, enableLazyContextPropagation, - enableSuspenseLayoutEffectSemantics, } from 'shared/ReactFeatureFlags'; import ReactStrictModeWarnings from './ReactStrictModeWarnings.old'; import {isMounted} from './ReactFiberTreeReflection'; @@ -908,10 +907,7 @@ function mountClassInstance( } if (typeof instance.componentDidMount === 'function') { - let fiberFlags: Flags = Update; - if (enableSuspenseLayoutEffectSemantics) { - fiberFlags |= LayoutStatic; - } + let fiberFlags: Flags = Update | LayoutStatic; if ( __DEV__ && enableStrictEffects && @@ -989,10 +985,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; - if (enableSuspenseLayoutEffectSemantics) { - fiberFlags |= LayoutStatic; - } + let fiberFlags: Flags = Update | LayoutStatic; if ( __DEV__ && enableStrictEffects && @@ -1043,10 +1036,7 @@ function resumeMountClassInstance( } } if (typeof instance.componentDidMount === 'function') { - let fiberFlags: Flags = Update; - if (enableSuspenseLayoutEffectSemantics) { - fiberFlags |= LayoutStatic; - } + let fiberFlags: Flags = Update | LayoutStatic; if ( __DEV__ && enableStrictEffects && @@ -1060,10 +1050,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; - if (enableSuspenseLayoutEffectSemantics) { - fiberFlags |= LayoutStatic; - } + let fiberFlags: Flags = Update | LayoutStatic; if ( __DEV__ && enableStrictEffects && diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js index 8448f8c25eb24..fef5a029d4ab0 100644 --- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js +++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js @@ -41,7 +41,6 @@ import { enableScopeAPI, enableStrictEffects, deletedTreeCleanUpLevel, - enableSuspenseLayoutEffectSemantics, enableUpdaterTracking, enableCache, enableTransitionTracing, @@ -173,7 +172,6 @@ if (__DEV__) { // Used during the commit phase to track the state of the Offscreen component stack. // Allows us to avoid traversing the return path to find the nearest Offscreen ancestor. -// Only used when enableSuspenseLayoutEffectSemantics is enabled. let offscreenSubtreeIsHidden: boolean = false; let offscreenSubtreeWasHidden: boolean = false; @@ -710,10 +708,7 @@ function commitLayoutEffectOnFiber( case FunctionComponent: case ForwardRef: case SimpleMemoComponent: { - if ( - !enableSuspenseLayoutEffectSemantics || - !offscreenSubtreeWasHidden - ) { + if (!offscreenSubtreeWasHidden) { // At this point layout effects have already been destroyed (during mutation phase). // This is done to prevent sibling component effects from interfering with each other, // e.g. a destroy function in one component should never override a ref set @@ -1018,7 +1013,7 @@ function commitLayoutEffectOnFiber( } } - if (!enableSuspenseLayoutEffectSemantics || !offscreenSubtreeWasHidden) { + if (!offscreenSubtreeWasHidden) { if (enableScopeAPI) { // TODO: This is a temporary solution that allowed us to transition away // from React Flare on www. @@ -1889,11 +1884,7 @@ function commitDeletionEffectsOnFiber( return; } case OffscreenComponent: { - if ( - // TODO: Remove this dead flag - enableSuspenseLayoutEffectSemantics && - deletedFiber.mode & ConcurrentMode - ) { + if (deletedFiber.mode & ConcurrentMode) { // If this offscreen component is hidden, we already unmounted it. Before // deleting the children, track that it's already unmounted so that we // don't attempt to unmount the effects again. @@ -2341,11 +2332,7 @@ function commitMutationEffectsOnFiber( case OffscreenComponent: { const wasHidden = current !== null && current.memoizedState !== null; - if ( - // TODO: Remove this dead flag - enableSuspenseLayoutEffectSemantics && - finishedWork.mode & ConcurrentMode - ) { + if (finishedWork.mode & ConcurrentMode) { // Before committing the children, track on the stack whether this // offscreen subtree was already hidden, so that we don't unmount the // effects again. @@ -2369,23 +2356,21 @@ function commitMutationEffectsOnFiber( // read it during an event offscreenInstance.isHidden = isHidden; - if (enableSuspenseLayoutEffectSemantics) { - if (isHidden) { - if (!wasHidden) { - if ((offscreenBoundary.mode & ConcurrentMode) !== NoMode) { - nextEffect = offscreenBoundary; - let offscreenChild = offscreenBoundary.child; - while (offscreenChild !== null) { - nextEffect = offscreenChild; - disappearLayoutEffects_begin(offscreenChild); - offscreenChild = offscreenChild.sibling; - } + if (isHidden) { + if (!wasHidden) { + if ((offscreenBoundary.mode & ConcurrentMode) !== NoMode) { + nextEffect = offscreenBoundary; + let offscreenChild = offscreenBoundary.child; + while (offscreenChild !== null) { + nextEffect = offscreenChild; + disappearLayoutEffects_begin(offscreenChild); + offscreenChild = offscreenChild.sibling; } } - } else { - if (wasHidden) { - // TODO: Move re-appear call here for symmetry? - } + } + } else { + if (wasHidden) { + // TODO: Move re-appear call here for symmetry? } } @@ -2483,11 +2468,7 @@ function commitLayoutEffects_begin( const fiber = nextEffect; const firstChild = fiber.child; - if ( - enableSuspenseLayoutEffectSemantics && - fiber.tag === OffscreenComponent && - isModernRoot - ) { + if (fiber.tag === OffscreenComponent && isModernRoot) { // Keep track of the current Offscreen stack's state. const isHidden = fiber.memoizedState !== null; const newOffscreenSubtreeIsHidden = isHidden || offscreenSubtreeIsHidden; diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js index ab273999764b7..da9e3c565da65 100644 --- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js +++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js @@ -41,7 +41,6 @@ import { enableScopeAPI, enableStrictEffects, deletedTreeCleanUpLevel, - enableSuspenseLayoutEffectSemantics, enableUpdaterTracking, enableCache, enableTransitionTracing, @@ -173,7 +172,6 @@ if (__DEV__) { // Used during the commit phase to track the state of the Offscreen component stack. // Allows us to avoid traversing the return path to find the nearest Offscreen ancestor. -// Only used when enableSuspenseLayoutEffectSemantics is enabled. let offscreenSubtreeIsHidden: boolean = false; let offscreenSubtreeWasHidden: boolean = false; @@ -710,10 +708,7 @@ function commitLayoutEffectOnFiber( case FunctionComponent: case ForwardRef: case SimpleMemoComponent: { - if ( - !enableSuspenseLayoutEffectSemantics || - !offscreenSubtreeWasHidden - ) { + if (!offscreenSubtreeWasHidden) { // At this point layout effects have already been destroyed (during mutation phase). // This is done to prevent sibling component effects from interfering with each other, // e.g. a destroy function in one component should never override a ref set @@ -1018,7 +1013,7 @@ function commitLayoutEffectOnFiber( } } - if (!enableSuspenseLayoutEffectSemantics || !offscreenSubtreeWasHidden) { + if (!offscreenSubtreeWasHidden) { if (enableScopeAPI) { // TODO: This is a temporary solution that allowed us to transition away // from React Flare on www. @@ -1889,11 +1884,7 @@ function commitDeletionEffectsOnFiber( return; } case OffscreenComponent: { - if ( - // TODO: Remove this dead flag - enableSuspenseLayoutEffectSemantics && - deletedFiber.mode & ConcurrentMode - ) { + if (deletedFiber.mode & ConcurrentMode) { // If this offscreen component is hidden, we already unmounted it. Before // deleting the children, track that it's already unmounted so that we // don't attempt to unmount the effects again. @@ -2341,11 +2332,7 @@ function commitMutationEffectsOnFiber( case OffscreenComponent: { const wasHidden = current !== null && current.memoizedState !== null; - if ( - // TODO: Remove this dead flag - enableSuspenseLayoutEffectSemantics && - finishedWork.mode & ConcurrentMode - ) { + if (finishedWork.mode & ConcurrentMode) { // Before committing the children, track on the stack whether this // offscreen subtree was already hidden, so that we don't unmount the // effects again. @@ -2369,23 +2356,21 @@ function commitMutationEffectsOnFiber( // read it during an event offscreenInstance.isHidden = isHidden; - if (enableSuspenseLayoutEffectSemantics) { - if (isHidden) { - if (!wasHidden) { - if ((offscreenBoundary.mode & ConcurrentMode) !== NoMode) { - nextEffect = offscreenBoundary; - let offscreenChild = offscreenBoundary.child; - while (offscreenChild !== null) { - nextEffect = offscreenChild; - disappearLayoutEffects_begin(offscreenChild); - offscreenChild = offscreenChild.sibling; - } + if (isHidden) { + if (!wasHidden) { + if ((offscreenBoundary.mode & ConcurrentMode) !== NoMode) { + nextEffect = offscreenBoundary; + let offscreenChild = offscreenBoundary.child; + while (offscreenChild !== null) { + nextEffect = offscreenChild; + disappearLayoutEffects_begin(offscreenChild); + offscreenChild = offscreenChild.sibling; } } - } else { - if (wasHidden) { - // TODO: Move re-appear call here for symmetry? - } + } + } else { + if (wasHidden) { + // TODO: Move re-appear call here for symmetry? } } @@ -2483,11 +2468,7 @@ function commitLayoutEffects_begin( const fiber = nextEffect; const firstChild = fiber.child; - if ( - enableSuspenseLayoutEffectSemantics && - fiber.tag === OffscreenComponent && - isModernRoot - ) { + if (fiber.tag === OffscreenComponent && isModernRoot) { // Keep track of the current Offscreen stack's state. const isHidden = fiber.memoizedState !== null; const newOffscreenSubtreeIsHidden = isHidden || offscreenSubtreeIsHidden; diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js index 39ff1261660a2..1246feaff5577 100644 --- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js +++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js @@ -140,7 +140,6 @@ import { enableScopeAPI, enableProfilerTimer, enableCache, - enableSuspenseLayoutEffectSemantics, enableTransitionTracing, } from 'shared/ReactFeatureFlags'; import { @@ -173,10 +172,7 @@ function markUpdate(workInProgress: Fiber) { } function markRef(workInProgress: Fiber) { - workInProgress.flags |= Ref; - if (enableSuspenseLayoutEffectSemantics) { - workInProgress.flags |= RefStatic; - } + workInProgress.flags |= Ref | RefStatic; } function hadNoMutationsEffects(current: null | Fiber, completedWork: Fiber) { diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js index 90c283966e654..108bbc92b0fd8 100644 --- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js +++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js @@ -140,7 +140,6 @@ import { enableScopeAPI, enableProfilerTimer, enableCache, - enableSuspenseLayoutEffectSemantics, enableTransitionTracing, } from 'shared/ReactFeatureFlags'; import { @@ -173,10 +172,7 @@ function markUpdate(workInProgress: Fiber) { } function markRef(workInProgress: Fiber) { - workInProgress.flags |= Ref; - if (enableSuspenseLayoutEffectSemantics) { - workInProgress.flags |= RefStatic; - } + workInProgress.flags |= Ref | RefStatic; } function hadNoMutationsEffects(current: null | Fiber, completedWork: Fiber) { diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js index c3ff781fb5f79..4cc4dda6fa611 100644 --- a/packages/react-reconciler/src/ReactFiberHooks.new.js +++ b/packages/react-reconciler/src/ReactFiberHooks.new.js @@ -30,7 +30,6 @@ import { enableUseRefAccessWarning, enableStrictEffects, enableLazyContextPropagation, - enableSuspenseLayoutEffectSemantics, enableUseMutableSource, enableTransitionTracing, } from 'shared/ReactFeatureFlags'; @@ -1749,10 +1748,7 @@ function mountLayoutEffect( create: () => (() => void) | void, deps: Array | void | null, ): void { - let fiberFlags: Flags = UpdateEffect; - if (enableSuspenseLayoutEffectSemantics) { - fiberFlags |= LayoutStaticEffect; - } + let fiberFlags: Flags = UpdateEffect | LayoutStaticEffect; if ( __DEV__ && enableStrictEffects && @@ -1819,10 +1815,7 @@ function mountImperativeHandle( const effectDeps = deps !== null && deps !== undefined ? deps.concat([ref]) : null; - let fiberFlags: Flags = UpdateEffect; - if (enableSuspenseLayoutEffectSemantics) { - fiberFlags |= LayoutStaticEffect; - } + let fiberFlags: Flags = UpdateEffect | LayoutStaticEffect; if ( __DEV__ && enableStrictEffects && diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js index fc25083fe4253..81fdcb7696be1 100644 --- a/packages/react-reconciler/src/ReactFiberHooks.old.js +++ b/packages/react-reconciler/src/ReactFiberHooks.old.js @@ -30,7 +30,6 @@ import { enableUseRefAccessWarning, enableStrictEffects, enableLazyContextPropagation, - enableSuspenseLayoutEffectSemantics, enableUseMutableSource, enableTransitionTracing, } from 'shared/ReactFeatureFlags'; @@ -1754,10 +1753,7 @@ function mountLayoutEffect( create: () => (() => void) | void, deps: Array | void | null, ): void { - let fiberFlags: Flags = UpdateEffect; - if (enableSuspenseLayoutEffectSemantics) { - fiberFlags |= LayoutStaticEffect; - } + let fiberFlags: Flags = UpdateEffect | LayoutStaticEffect; if ( __DEV__ && enableStrictEffects && @@ -1824,10 +1820,7 @@ function mountImperativeHandle( const effectDeps = deps !== null && deps !== undefined ? deps.concat([ref]) : null; - let fiberFlags: Flags = UpdateEffect; - if (enableSuspenseLayoutEffectSemantics) { - fiberFlags |= LayoutStaticEffect; - } + let fiberFlags: Flags = UpdateEffect | LayoutStaticEffect; if ( __DEV__ && enableStrictEffects && diff --git a/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js b/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js index 01e9742259365..682ceb87dfb94 100644 --- a/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js +++ b/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js @@ -1350,11 +1350,7 @@ describe('ReactLazy', () => { expect(Scheduler).toFlushAndYield(['Init B2', 'Loading...']); jest.runAllTimers(); - gate(flags => { - if (flags.enableSuspenseLayoutEffectSemantics) { - expect(Scheduler).toHaveYielded(['Did unmount: A', 'Did unmount: B']); - } - }); + expect(Scheduler).toHaveYielded(['Did unmount: A', 'Did unmount: B']); // The suspense boundary should've triggered now. expect(root).toMatchRenderedOutput('Loading...'); @@ -1364,23 +1360,12 @@ describe('ReactLazy', () => { expect(Scheduler).toFlushAndYield(['Init A2']); await LazyChildA2; - gate(flags => { - if (flags.enableSuspenseLayoutEffectSemantics) { - expect(Scheduler).toFlushAndYield([ - 'b', - 'a', - 'Did mount: b', - 'Did mount: a', - ]); - } else { - expect(Scheduler).toFlushAndYield([ - 'b', - 'a', - 'Did update: b', - 'Did update: a', - ]); - } - }); + expect(Scheduler).toFlushAndYield([ + 'b', + 'a', + 'Did mount: b', + 'Did mount: a', + ]); expect(root).toMatchRenderedOutput('ba'); }); diff --git a/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js b/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js index 42b462100f316..0f9fd6dd5b217 100644 --- a/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js +++ b/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js @@ -179,7 +179,6 @@ describe('ReactOffscreen', () => { }); // @gate experimental || www - // @gate enableSuspenseLayoutEffectSemantics it('mounts without layout effects when hidden', async () => { function Child({text}) { useLayoutEffect(() => { @@ -218,7 +217,6 @@ describe('ReactOffscreen', () => { }); // @gate experimental || www - // @gate enableSuspenseLayoutEffectSemantics it('mounts/unmounts layout effects when visibility changes (starting visible)', async () => { function Child({text}) { useLayoutEffect(() => { @@ -265,7 +263,6 @@ describe('ReactOffscreen', () => { }); // @gate experimental || www - // @gate enableSuspenseLayoutEffectSemantics it('mounts/unmounts layout effects when visibility changes (starting hidden)', async () => { function Child({text}) { useLayoutEffect(() => { @@ -313,7 +310,6 @@ describe('ReactOffscreen', () => { }); // @gate experimental || www - // @gate enableSuspenseLayoutEffectSemantics it('hides children of offscreen after layout effects are destroyed', async () => { const root = ReactNoop.createRoot(); function Child({text}) { diff --git a/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js b/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js index 7adc0345729fc..05483e15c7dc1 100644 --- a/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js +++ b/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js @@ -727,7 +727,6 @@ describe('ReactSuspense', () => { expect(root).toMatchRenderedOutput('new value'); }); - // @gate enableSuspenseLayoutEffectSemantics it('re-fires layout effects when re-showing Suspense', () => { function TextWithLayout(props) { Scheduler.unstable_yieldValue(props.text); diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js index 1825d41fd1da6..976d7ecf4f793 100644 --- a/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js +++ b/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js @@ -565,7 +565,6 @@ describe('ReactSuspenseEffectsSemantics', () => { ]); }); - // @gate enableSuspenseLayoutEffectSemantics // @gate enableCache it('should be destroyed and recreated for function components', async () => { function App({children = null}) { @@ -694,7 +693,6 @@ describe('ReactSuspenseEffectsSemantics', () => { ]); }); - // @gate enableSuspenseLayoutEffectSemantics // @gate enableCache it('should be destroyed and recreated for class components', async () => { class ClassText extends React.Component { @@ -839,7 +837,6 @@ describe('ReactSuspenseEffectsSemantics', () => { ]); }); - // @gate enableSuspenseLayoutEffectSemantics // @gate enableCache it('should be destroyed and recreated when nested below host components', async () => { function App({children = null}) { @@ -949,7 +946,6 @@ describe('ReactSuspenseEffectsSemantics', () => { ]); }); - // @gate enableSuspenseLayoutEffectSemantics // @gate enableCache it('should be destroyed and recreated even if there is a bailout because of memoization', async () => { const MemoizedText = React.memo(Text, () => true); @@ -1065,7 +1061,6 @@ describe('ReactSuspenseEffectsSemantics', () => { ]); }); - // @gate enableSuspenseLayoutEffectSemantics // @gate enableCache it('should respect nested suspense boundaries', async () => { function App({innerChildren = null, outerChildren = null}) { @@ -1288,7 +1283,6 @@ describe('ReactSuspenseEffectsSemantics', () => { ]); }); - // @gate enableSuspenseLayoutEffectSemantics // @gate enableCache it('should show nested host nodes if multiple boundaries resolve at the same time', async () => { function App({innerChildren = null, outerChildren = null}) { @@ -1398,7 +1392,6 @@ describe('ReactSuspenseEffectsSemantics', () => { ]); }); - // @gate enableSuspenseLayoutEffectSemantics // @gate enableCache it('should be cleaned up inside of a fallback that suspends', async () => { function App({fallbackChildren = null, outerChildren = null}) { @@ -1541,7 +1534,6 @@ describe('ReactSuspenseEffectsSemantics', () => { ]); }); - // @gate enableSuspenseLayoutEffectSemantics // @gate enableCache it('should be cleaned up inside of a fallback that suspends (alternate)', async () => { function App({fallbackChildren = null, outerChildren = null}) { @@ -1661,7 +1653,6 @@ describe('ReactSuspenseEffectsSemantics', () => { ]); }); - // @gate enableSuspenseLayoutEffectSemantics // @gate enableCache it('should be cleaned up deeper inside of a subtree that suspends', async () => { function ConditionalSuspense({shouldSuspend}) { @@ -1744,7 +1735,6 @@ describe('ReactSuspenseEffectsSemantics', () => { }); describe('that throw errors', () => { - // @gate enableSuspenseLayoutEffectSemantics // @gate enableCache it('are properly handled for componentDidMount', async () => { let componentDidMountShouldThrow = false; @@ -1883,7 +1873,6 @@ describe('ReactSuspenseEffectsSemantics', () => { expect(ReactNoop.getChildren()).toEqual([span('Error')]); }); - // @gate enableSuspenseLayoutEffectSemantics // @gate enableCache it('are properly handled for componentWillUnmount', async () => { class ThrowsInWillUnmount extends React.Component { @@ -1995,7 +1984,6 @@ describe('ReactSuspenseEffectsSemantics', () => { expect(ReactNoop.getChildren()).toEqual([span('Error')]); }); - // @gate enableSuspenseLayoutEffectSemantics // @gate enableCache // @gate replayFailedUnitOfWorkWithInvokeGuardedCallback it('are properly handled for layout effect creation', async () => { @@ -2135,7 +2123,6 @@ describe('ReactSuspenseEffectsSemantics', () => { expect(ReactNoop.getChildren()).toEqual([span('Error')]); }); - // @gate enableSuspenseLayoutEffectSemantics // @gate enableCache // @gate replayFailedUnitOfWorkWithInvokeGuardedCallback it('are properly handled for layout effect destruction', async () => { @@ -2247,7 +2234,6 @@ describe('ReactSuspenseEffectsSemantics', () => { }); }); - // @gate enableSuspenseLayoutEffectSemantics // @gate enableCache it('should be only destroy layout effects once if a tree suspends in multiple places', async () => { class ClassText extends React.Component { @@ -2386,7 +2372,6 @@ describe('ReactSuspenseEffectsSemantics', () => { ]); }); - // @gate enableSuspenseLayoutEffectSemantics // @gate enableCache it('should be only destroy layout effects once if a component suspends multiple times', async () => { class ClassText extends React.Component { @@ -2670,7 +2655,6 @@ describe('ReactSuspenseEffectsSemantics', () => { expect(ReactNoop.getChildren()).toEqual([]); }); - // @gate enableSuspenseLayoutEffectSemantics // @gate enableCache it('should be cleared and reset for host components', async () => { function App({children}) { @@ -2767,7 +2751,6 @@ describe('ReactSuspenseEffectsSemantics', () => { expect(ReactNoop.getChildren()).toEqual([]); }); - // @gate enableSuspenseLayoutEffectSemantics // @gate enableCache it('should be cleared and reset for class components', async () => { class ClassComponent extends React.Component { @@ -2868,7 +2851,6 @@ describe('ReactSuspenseEffectsSemantics', () => { expect(ReactNoop.getChildren()).toEqual([]); }); - // @gate enableSuspenseLayoutEffectSemantics // @gate enableCache it('should be cleared and reset for function components with useImperativeHandle', async () => { const FunctionComponent = React.forwardRef((props, ref) => { @@ -2973,7 +2955,6 @@ describe('ReactSuspenseEffectsSemantics', () => { expect(ReactNoop.getChildren()).toEqual([]); }); - // @gate enableSuspenseLayoutEffectSemantics // @gate enableCache it('should not reset for user-managed values', async () => { function RefChecker({forwardedRef}) { @@ -3071,7 +3052,6 @@ describe('ReactSuspenseEffectsSemantics', () => { }); describe('that throw errors', () => { - // @gate enableSuspenseLayoutEffectSemantics // @gate enableCache // @gate replayFailedUnitOfWorkWithInvokeGuardedCallback it('are properly handled in ref callbacks', async () => { diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseFuzz-test.internal.js b/packages/react-reconciler/src/__tests__/ReactSuspenseFuzz-test.internal.js index 957d5f37c70f2..0cc39c98e0466 100644 --- a/packages/react-reconciler/src/__tests__/ReactSuspenseFuzz-test.internal.js +++ b/packages/react-reconciler/src/__tests__/ReactSuspenseFuzz-test.internal.js @@ -176,18 +176,6 @@ describe('ReactSuspenseFuzz', () => { const legacyOutput = ReactNoop.getChildrenAsJSX(); expect(legacyOutput).toEqual(expectedOutput); ReactNoop.renderLegacySyncRoot(null); - - // Observable behavior differs here in a way that's expected: - // If enableSuspenseLayoutEffectSemantics is enabled, layout effects are destroyed on re-suspend - // before larger 'beginAfter' timers have a chance to fire. - if (!flags.enableSuspenseLayoutEffectSemantics) { - resetCache(); - const concurrentRoot = ReactNoop.createRoot(); - concurrentRoot.render(children); - resolveAllTasks(); - const concurrentOutput = concurrentRoot.getChildrenAsJSX(); - expect(concurrentOutput).toEqual(expectedOutput); - } }); } diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js index 7b76a1f7524cb..33d233f92e4ef 100644 --- a/packages/shared/ReactFeatureFlags.js +++ b/packages/shared/ReactFeatureFlags.js @@ -31,14 +31,6 @@ export const enableSymbolFallbackForWWW = false; // internal tests need to be updated. The open source behavior is correct. export const skipUnmountedBoundaries = true; -// Destroy layout effects for components that are hidden because something -// suspended in an update and recreate them when they are shown again (after the -// suspended boundary has resolved). Note that this should be an uncommon use -// case and can be avoided by using the transition API. -// -// TODO: Finish rolling out in www -export const enableSuspenseLayoutEffectSemantics = true; - // TODO: Finish rolling out in www export const enableClientRenderFallbackOnTextMismatch = true; diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js index ea80fba1da246..0e07c9f67d994 100644 --- a/packages/shared/forks/ReactFeatureFlags.native-fb.js +++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js @@ -58,7 +58,6 @@ export const enableFilterEmptyStringAttributesDOM = false; export const disableNativeComponentFrames = false; export const skipUnmountedBoundaries = false; export const deletedTreeCleanUpLevel = 3; -export const enableSuspenseLayoutEffectSemantics = false; export const enableGetInspectorDataForInstanceInProduction = true; export const enableNewReconciler = false; export const deferRenderPhaseUpdateToNextBatch = false; diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js index 9a5c2bca40a7c..933d914ce5a62 100644 --- a/packages/shared/forks/ReactFeatureFlags.native-oss.js +++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js @@ -48,7 +48,6 @@ export const enableFilterEmptyStringAttributesDOM = false; export const disableNativeComponentFrames = false; export const skipUnmountedBoundaries = false; export const deletedTreeCleanUpLevel = 3; -export const enableSuspenseLayoutEffectSemantics = false; export const enableGetInspectorDataForInstanceInProduction = false; export const enableNewReconciler = false; export const deferRenderPhaseUpdateToNextBatch = false; diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js index 157fda232ed38..b218c53470bda 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js @@ -48,7 +48,6 @@ export const enableFilterEmptyStringAttributesDOM = false; export const disableNativeComponentFrames = false; export const skipUnmountedBoundaries = false; export const deletedTreeCleanUpLevel = 3; -export const enableSuspenseLayoutEffectSemantics = false; export const enableGetInspectorDataForInstanceInProduction = false; export const enableNewReconciler = false; export const deferRenderPhaseUpdateToNextBatch = false; diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js index 0a770e1438a8a..b76a1b8506d13 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js @@ -43,7 +43,6 @@ export const enableFilterEmptyStringAttributesDOM = false; export const disableNativeComponentFrames = false; export const skipUnmountedBoundaries = false; export const deletedTreeCleanUpLevel = 3; -export const enableSuspenseLayoutEffectSemantics = false; export const enableGetInspectorDataForInstanceInProduction = false; export const enableNewReconciler = false; export const deferRenderPhaseUpdateToNextBatch = false; diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js index 157f9d6a41527..63ba329f01a90 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js @@ -48,7 +48,6 @@ export const enableFilterEmptyStringAttributesDOM = false; export const disableNativeComponentFrames = false; export const skipUnmountedBoundaries = false; export const deletedTreeCleanUpLevel = 3; -export const enableSuspenseLayoutEffectSemantics = false; export const enableGetInspectorDataForInstanceInProduction = false; export const enableNewReconciler = false; export const deferRenderPhaseUpdateToNextBatch = false; diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js index 072c58b5c8ec6..9e5a9107ab2b1 100644 --- a/packages/shared/forks/ReactFeatureFlags.testing.js +++ b/packages/shared/forks/ReactFeatureFlags.testing.js @@ -48,7 +48,6 @@ export const enableFilterEmptyStringAttributesDOM = false; export const disableNativeComponentFrames = false; export const skipUnmountedBoundaries = false; export const deletedTreeCleanUpLevel = 3; -export const enableSuspenseLayoutEffectSemantics = false; export const enableGetInspectorDataForInstanceInProduction = false; export const enableNewReconciler = false; export const deferRenderPhaseUpdateToNextBatch = false; diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js index a607e3ea7f71c..a4c3e1ba32678 100644 --- a/packages/shared/forks/ReactFeatureFlags.testing.www.js +++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js @@ -48,7 +48,6 @@ export const enableFilterEmptyStringAttributesDOM = false; export const disableNativeComponentFrames = false; export const skipUnmountedBoundaries = true; export const deletedTreeCleanUpLevel = 3; -export const enableSuspenseLayoutEffectSemantics = false; export const enableGetInspectorDataForInstanceInProduction = false; export const enableNewReconciler = false; export const deferRenderPhaseUpdateToNextBatch = false; diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js index a1932e21c4e1e..938d7589c4e21 100644 --- a/packages/shared/forks/ReactFeatureFlags.www.js +++ b/packages/shared/forks/ReactFeatureFlags.www.js @@ -48,7 +48,6 @@ export const enableProfilerNestedUpdateScheduledHook = __PROFILE__ && dynamicFeatureFlags.enableProfilerNestedUpdateScheduledHook; export const enableUpdaterTracking = __PROFILE__; -export const enableSuspenseLayoutEffectSemantics = true; export const enableSuspenseAvoidThisFallback = true; export const enableSuspenseAvoidThisFallbackFizz = false; export const enableCPUSuspense = true;