From b04254fdcee30871760301f34236ee0dfadf86ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Tue, 15 Apr 2025 17:43:42 -0400
Subject: [PATCH] Don't try to hydrate a hidden Offscreen tree (#32862)

I found a bug even before the Activity hydration stuff.

If we're hydrating an Offscreen boundary in its "hidden" state it won't
have any content to hydrate so will trigger hydration errors (which are
then eaten by the Offscreen boundary itself). Leaving it not prewarmed.

This doesn't happen in the simple case because we'd be hydrating at a
higher priority than Offscreen at the root, and those are deferred to
Offscreen by not having higher priority. However, we've hydrating at the
Offscreen priority, which we do inside Suspense boundaries, then it
tries to hydrate against an empty set.

I ended up moving this to the Activity boundary in a future PR since
it's the SSR side that decided where to not render something and it only
has a concept of Activity, no Offscreen.


https://github.com/facebook/react/pull/32863/commits/1dc05a5e2222e18fc3a2062ee1bd957109e21344#diff-d5166797ebbc5b646a49e6a06a049330ca617985d7a6edf3ad1641b43fde1ddfR1111
---
 ...DOMServerPartialHydration-test.internal.js | 41 +++++++++++++++++++
 .../src/ReactFiberBeginWork.js                |  9 +++-
 2 files changed, 49 insertions(+), 1 deletion(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index 86a0ceb42e..deef07d6ef 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -3723,6 +3723,11 @@ describe('ReactDOMServerPartialHydration', () => {
           <Activity mode="hidden">
             <HiddenChild />
           </Activity>
+          <Suspense fallback={null}>
+            <Activity mode="hidden">
+              <HiddenChild />
+            </Activity>
+          </Suspense>
         </>
       );
     }
@@ -3743,6 +3748,10 @@ describe('ReactDOMServerPartialHydration', () => {
         </span>
         <!--&-->
         <!--/&-->
+        <!--$-->
+        <!--&-->
+        <!--/&-->
+        <!--/$-->
       </div>
     `);
 
@@ -3758,6 +3767,7 @@ describe('ReactDOMServerPartialHydration', () => {
       await waitForPaint([]);
     }
     // Subsequently, the hidden child is prerendered on the client
+    // along with hydrating the Suspense boundary outside the Activity.
     await waitForPaint(['HiddenChild']);
     expect(container).toMatchInlineSnapshot(`
       <div>
@@ -3766,6 +3776,37 @@ describe('ReactDOMServerPartialHydration', () => {
         </span>
         <!--&-->
         <!--/&-->
+        <!--$-->
+        <!--&-->
+        <!--/&-->
+        <!--/$-->
+        <span
+          style="display: none;"
+        >
+          Hidden
+        </span>
+      </div>
+    `);
+
+    // Next the child inside the Activity is hydrated.
+    await waitForPaint(['HiddenChild']);
+
+    expect(container).toMatchInlineSnapshot(`
+      <div>
+        <span>
+          Visible
+        </span>
+        <!--&-->
+        <!--/&-->
+        <!--$-->
+        <!--&-->
+        <!--/&-->
+        <!--/$-->
+        <span
+          style="display: none;"
+        >
+          Hidden
+        </span>
         <span
           style="display: none;"
         >
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.js b/packages/react-reconciler/src/ReactFiberBeginWork.js
index fd8451a3ef..68a832e72e 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.js
@@ -712,7 +712,14 @@ function updateOffscreenComponent(
       }
       reuseHiddenContextOnStack(workInProgress);
       pushOffscreenSuspenseHandler(workInProgress);
-    } else if (!includesSomeLane(renderLanes, (OffscreenLane: Lane))) {
+    } else if (
+      !includesSomeLane(renderLanes, (OffscreenLane: Lane)) ||
+      // SSR doesn't render hidden content (except legacy hidden) so it shouldn't hydrate,
+      // even at offscreen lane. Defer to a client rendered offscreen lane.
+      (getIsHydrating() &&
+        (!enableLegacyHidden ||
+          nextProps.mode !== 'unstable-defer-without-hiding'))
+    ) {
       // We're hidden, and we're not rendering at Offscreen. We will bail out
       // and resume this tree later.