Add test for hiding children after layout destroy (#24483)

Author: rickhanlonii

packages/react-reconciler/src/__tests__/ReactOffscreen-test.js

@@ -310,6 +310,47 @@ describe('ReactOffscreen', () => {
 expect(root).toMatchRenderedOutput(<spanhidden={true}prop="Child"/>);
 });
 
+// @gate experimental || www
+// @gate enableSuspenseLayoutEffectSemantics
+// @gate enableFlipOffscreenUnhideOrder
+it('hides children of offscreen after layout effects are destroyed',async()=>{
+constroot=ReactNoop.createRoot();
+functionChild({text}){
+useLayoutEffect(()=>{
+Scheduler.unstable_yieldValue('Mount layout');
+return()=>{
+// The child should not be hidden yet.
+expect(root).toMatchRenderedOutput(<spanprop="Child"/>);
+Scheduler.unstable_yieldValue('Unmount layout');
+};
+},[]);
+return<Texttext="Child"/>;
+}
+
+awaitact(async()=>{
+root.render(
+<Offscreenmode="visible">
+<Child/>
+</Offscreen>,
+);
+});
+expect(Scheduler).toHaveYielded(['Child','Mount layout']);
+expect(root).toMatchRenderedOutput(<spanprop="Child"/>);
+
+// Hide the tree. The layout effect is unmounted.
+awaitact(async()=>{
+root.render(
+<Offscreenmode="hidden">
+<Child/>
+</Offscreen>,
+);
+});
+expect(Scheduler).toHaveYielded(['Unmount layout','Child']);
+
+// After the layout effect is unmounted, the child is hidden.
+expect(root).toMatchRenderedOutput(<spanhidden={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

packages/shared/ReactFeatureFlags.js

@@ -38,7 +38,7 @@ export const skipUnmountedBoundaries = true;
 //
 // TODO: Finish rolling out in www
 exportconstenableSuspenseLayoutEffectSemantics=true;
-exportconstenableFlipOffscreenUnhideOrder=false;
+exportconstenableFlipOffscreenUnhideOrder=true;
 
 // TODO: Finish rolling out in www
 exportconstenableClientRenderFallbackOnTextMismatch=true;