Force client render, even at Offscreen pri

acdlite · May 14, 2020 · 68d6eb7 · 68d6eb7
1 parent 6407baf
commit 68d6eb7
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 1 deletion.
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -2839,6 +2839,37 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(ref.current.innerHTML).toBe('Hidden child');
   });
 
+  // @gate experimental
+  // @gate new
+  it('renders a hidden LegacyHidden component inside a Suspense boundary', async () => {
+    const LegacyHidden = React.unstable_LegacyHidden;
+
+    const ref = React.createRef();
+
+    function App() {
+      return (
+        <Suspense fallback="Loading...">
+          <LegacyHidden mode="hidden">
+            <span ref={ref}>Hidden child</span>
+          </LegacyHidden>
+        </Suspense>
+      );
+    }
+
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    const span = container.getElementsByTagName('span')[0];
+    expect(span).toBe(undefined);
+
+    const root = ReactDOM.createRoot(container, {hydrate: true});
+    root.render(<App />);
+    Scheduler.unstable_flushAll();
+    expect(ref.current.innerHTML).toBe('Hidden child');
+  });
+
   // @gate experimental
   // @gate new
   it('renders a visible LegacyHidden component', async () => {

diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -165,6 +165,7 @@ import {
   reenterHydrationStateFromDehydratedSuspenseInstance,
   resetHydrationState,
   tryToClaimNextHydratableInstance,
+  getIsHydrating,
   warnIfHydrating,
 } from './ReactFiberHydrationContext.new';
 import {
@@ -574,7 +575,12 @@ function updateOffscreenComponent(
       };
       workInProgress.memoizedState = nextState;
       pushRenderLanes(workInProgress, renderLanes);
-    } else if (!includesSomeLane(renderLanes, (OffscreenLane: Lane))) {
+    } else if (
+      !includesSomeLane(renderLanes, (OffscreenLane: Lane)) ||
+      // Server renderer does not render hidden subtrees, so force a bailout
+      // if we're rendering at offscreen.
+      (current === null && getIsHydrating())
+    ) {
       let nextBaseLanes;
       if (prevState !== null) {
         const prevBaseLanes = prevState.baseLanes;