[Hydration] Bail out from hydrating suspense boundary if component suspends

packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js

@@ -991,7 +991,7 @@ describe('ReactDOMServerPartialHydration', () => {
       );
 
       // This will throw it away and rerender.
-      expect(Scheduler).toFlushAndYield(['Child', 'Sibling']);
+      expect(Scheduler).toFlushAndYield(['Child']);
 
       expect(container.textContent).toBe('Hello');
 
@@ -2738,4 +2738,57 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(ref.current).toBe(span);
     expect(ref.current.innerHTML).toBe('Hidden child');
   });
+
+  it('can hydrate siblings of a suspended component without errors', async () => {
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
+    function Child() {
+      if (suspend) {
+        throw promise;
+      } else {
+        return 'Hello';
+      }
+    }
+
+    function App() {
+      return (
+        <Suspense fallback="Loading...">
+          <Child />
+          <Suspense fallback="Loading...">
+            <div>Hello</div>
+          </Suspense>
+        </Suspense>
+      );
+    }
+
+    // First we render the final HTML. With the streaming renderer
+    // this may have suspense points on the server but here we want
+    // to test the completed HTML. Don't suspend on the server.
+    suspend = false;
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+    expect(container.textContent).toBe('HelloHello');
+
+    // On the client we don't have all data yet but we want to start
+    // hydrating anyway.
+    suspend = true;
+    ReactDOM.hydrateRoot(container, <App />);
+    Scheduler.unstable_flushAll();
+    jest.runAllTimers();
+
+    // Expect the server-generated HTML to stay intact.
+    expect(container.textContent).toBe('HelloHello');
+
+    // Resolving the promise should continue hydration
+    suspend = false;
+    resolve();
+    await promise;
+    Scheduler.unstable_flushAll();
+    jest.runAllTimers();
+    // Hydration should not change anything.
+    expect(container.textContent).toBe('HelloHello');
+  });
 });

packages/react-reconciler/src/ReactFiberWorkLoop.new.js

@@ -14,6 +14,7 @@ import type {SuspenseState} from './ReactFiberSuspenseComponent.new';
 import type {StackCursor} from './ReactFiberStack.new';
 import type {Flags} from './ReactFiberFlags';
 import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.new';
+import {getIsHydrating} from './ReactFiberHydrationContext.new';
 
 import {
   warnAboutDeprecatedLifecycles,
@@ -1746,7 +1747,11 @@ function completeUnitOfWork(unitOfWork: Fiber): void {
     }
 
     const siblingFiber = completedWork.sibling;
-    if (siblingFiber !== null) {
+    const isHydrating = getIsHydrating();
+    if (
+      siblingFiber !== null &&
+      (!isHydrating || (completedWork.flags & Incomplete) === NoFlags)
+    ) {
       // If there is more work to do in this returnFiber, do that next.
       workInProgress = siblingFiber;
       return;

packages/react-reconciler/src/ReactFiberWorkLoop.old.js

@@ -14,6 +14,7 @@ import type {SuspenseState} from './ReactFiberSuspenseComponent.old';
 import type {StackCursor} from './ReactFiberStack.old';
 import type {Flags} from './ReactFiberFlags';
 import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.old';
+import {getIsHydrating} from './ReactFiberHydrationContext.old';
 
 import {
   warnAboutDeprecatedLifecycles,
@@ -1746,7 +1747,11 @@ function completeUnitOfWork(unitOfWork: Fiber): void {
     }
 
     const siblingFiber = completedWork.sibling;
-    if (siblingFiber !== null) {
+    const isHydrating = getIsHydrating();
+    if (
+      siblingFiber !== null &&
+      (!isHydrating || (completedWork.flags & Incomplete) === NoFlags)
+    ) {
       // If there is more work to do in this returnFiber, do that next.
       workInProgress = siblingFiber;
       return;