diff --git a/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js b/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
index 3125fcc29e5f9..13257a82b81b8 100644
--- a/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
@@ -310,6 +310,47 @@ describe('ReactOffscreen', () => {
expect(root).toMatchRenderedOutput();
});
+ // @gate experimental || www
+ // @gate enableSuspenseLayoutEffectSemantics
+ // @gate enableFlipOffscreenUnhideOrder
+ it('hides children of offscreen after layout effects are destroyed', async () => {
+ const root = ReactNoop.createRoot();
+ function Child({text}) {
+ useLayoutEffect(() => {
+ Scheduler.unstable_yieldValue('Mount layout');
+ return () => {
+ // The child should not be hidden yet.
+ expect(root).toMatchRenderedOutput();
+ Scheduler.unstable_yieldValue('Unmount layout');
+ };
+ }, []);
+ return ;
+ }
+
+ await act(async () => {
+ root.render(
+
+
+ ,
+ );
+ });
+ expect(Scheduler).toHaveYielded(['Child', 'Mount layout']);
+ expect(root).toMatchRenderedOutput();
+
+ // Hide the tree. The layout effect is unmounted.
+ await act(async () => {
+ root.render(
+
+
+ ,
+ );
+ });
+ expect(Scheduler).toHaveYielded(['Unmount layout', 'Child']);
+
+ // After the layout effect is unmounted, the child is hidden.
+ expect(root).toMatchRenderedOutput();
+ });
+
// @gate www
it('does not toggle effects for LegacyHidden component', async () => {
// LegacyHidden is meant to be the same as offscreen except it doesn't
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index c3c65214e4b52..051840469e3fd 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -38,7 +38,7 @@ export const skipUnmountedBoundaries = true;
//
// TODO: Finish rolling out in www
export const enableSuspenseLayoutEffectSemantics = true;
-export const enableFlipOffscreenUnhideOrder = false;
+export const enableFlipOffscreenUnhideOrder = true;
// TODO: Finish rolling out in www
export const enableClientRenderFallbackOnTextMismatch = true;