From e748686abf392855620918df9b35e11f6b67a13c Mon Sep 17 00:00:00 2001
From: Rick Hanlon <rickhanlonii@gmail.com>
Date: Tue, 3 May 2022 13:18:14 -0400
Subject: [PATCH] Add test for hiding children after layout destroy

---
 .../src/__tests__/ReactOffscreen-test.js      | 41 +++++++++++++++++++
 packages/shared/ReactFeatureFlags.js          |  2 +-
 .../forks/ReactFeatureFlags.www-dynamic.js    |  2 +-
 3 files changed, 43 insertions(+), 2 deletions(-)

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(<span hidden={true} prop="Child" />);
   });
 
+  // @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(<span prop="Child" />);
+          Scheduler.unstable_yieldValue('Unmount layout');
+        };
+      }, []);
+      return <Text text="Child" />;
+    }
+
+    await act(async () => {
+      root.render(
+        <Offscreen mode="visible">
+          <Child />
+        </Offscreen>,
+      );
+    });
+    expect(Scheduler).toHaveYielded(['Child', 'Mount layout']);
+    expect(root).toMatchRenderedOutput(<span prop="Child" />);
+
+    // Hide the tree. The layout effect is unmounted.
+    await act(async () => {
+      root.render(
+        <Offscreen mode="hidden">
+          <Child />
+        </Offscreen>,
+      );
+    });
+    expect(Scheduler).toHaveYielded(['Unmount layout', 'Child']);
+
+    // After the layout effect is unmounted, the child is hidden.
+    expect(root).toMatchRenderedOutput(<span hidden={true} prop="Child" />);
+  });
+
   // @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;
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index ab0a2e1aa41ca..8bd6757c3b448 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -29,7 +29,7 @@ export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = __
 export const enableClientRenderFallbackOnTextMismatch = __VARIANT__;
 export const enableTransitionTracing = __VARIANT__;
 export const enableSymbolFallbackForWWW = __VARIANT__;
-export const enableFlipOffscreenUnhideOrder = __VARIANT__;
+
 // Enable this flag to help with concurrent mode debugging.
 // It logs information to the console about React scheduling, rendering, and commit phases.
 //