@samitouri / QOS-React-2 / commits / b04254fdce

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

Sebastian Markbåge committed Apr 15, 2025 at 17:43 UTC b04254fdcee30871760301f34236ee0dfadf86ab
2 files changed +49 -1
packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+41
@@ -3723,6 +3723,11 @@ describe('ReactDOMServerPartialHydration', () => {
3723 <Activity mode="hidden">
3724 <HiddenChild />
3725 </Activity>
3726 + <Suspense fallback={null}>
3727 + <Activity mode="hidden">
3728 + <HiddenChild />
3729 + </Activity>
3730 + </Suspense>
3731 </>
3732 );
3733 }
@@ -3743,6 +3748,10 @@ describe('ReactDOMServerPartialHydration', () => {
3748 </span>
3749 <!--&-->
3750 <!--/&-->
3751 + <!--$-->
3752 + <!--&-->
3753 + <!--/&-->
3754 + <!--/$-->
3755 </div>
3756 `);
3757
@@ -3758,6 +3767,7 @@ describe('ReactDOMServerPartialHydration', () => {
3767 await waitForPaint([]);
3768 }
3769 // Subsequently, the hidden child is prerendered on the client
3770 + // along with hydrating the Suspense boundary outside the Activity.
3771 await waitForPaint(['HiddenChild']);
3772 expect(container).toMatchInlineSnapshot(`
3773 <div>
@@ -3766,6 +3776,37 @@ describe('ReactDOMServerPartialHydration', () => {
3776 </span>
3777 <!--&-->
3778 <!--/&-->
3779 + <!--$-->
3780 + <!--&-->
3781 + <!--/&-->
3782 + <!--/$-->
3783 + <span
3784 + style="display: none;"
3785 + >
3786 + Hidden
3787 + </span>
3788 + </div>
3789 + `);
3790 +
3791 + // Next the child inside the Activity is hydrated.
3792 + await waitForPaint(['HiddenChild']);
3793 +
3794 + expect(container).toMatchInlineSnapshot(`
3795 + <div>
3796 + <span>
3797 + Visible
3798 + </span>
3799 + <!--&-->
3800 + <!--/&-->
3801 + <!--$-->
3802 + <!--&-->
3803 + <!--/&-->
3804 + <!--/$-->
3805 + <span
3806 + style="display: none;"
3807 + >
3808 + Hidden
3809 + </span>
3810 <span
3811 style="display: none;"
3812 >
packages/react-reconciler/src/ReactFiberBeginWork.js
+8 -1
@@ -712,7 +712,14 @@ function updateOffscreenComponent(
712 }
713 reuseHiddenContextOnStack(workInProgress);
714 pushOffscreenSuspenseHandler(workInProgress);
715 - } else if (!includesSomeLane(renderLanes, (OffscreenLane: Lane))) {
715 + } else if (
716 + !includesSomeLane(renderLanes, (OffscreenLane: Lane)) ||
717 + // SSR doesn't render hidden content (except legacy hidden) so it shouldn't hydrate,
718 + // even at offscreen lane. Defer to a client rendered offscreen lane.
719 + (getIsHydrating() &&
720 + (!enableLegacyHidden ||
721 + nextProps.mode !== 'unstable-defer-without-hiding'))
722 + ) {
723 // We're hidden, and we're not rendering at Offscreen. We will bail out
724 // and resume this tree later.
725