From d8a76ad5804197108f18b988f6d13c767ab41387 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Sat, 28 Sep 2019 10:43:53 -0700
Subject: [PATCH] Allow Suspense Mismatch on the Client to Silently Proceed
 (#16943)

* Regression test: Suspense + hydration + legacy

* Allow Suspense Mismatch on the Client to Silently Proceed

This fixes but isn't actually the semantics that we want this case to have.
---
 .../__tests__/ReactServerRenderingHydration-test.js   | 11 +++++++++++
 .../src/ReactFiberHydrationContext.js                 |  9 ++++-----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js b/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
index 33e56bba260ef..1707f9f1dbdc5 100644
--- a/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
+++ b/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
@@ -659,4 +659,15 @@ describe('ReactDOMServerHydration', () => {
 
     document.body.removeChild(parentContainer);
   });
+
+  it('regression test: Suspense + hydration in legacy mode ', () => {
+    const element = document.createElement('div');
+    element.innerHTML = '<div>Hello World</div>';
+    ReactDOM.hydrate(
+      <React.Suspense>
+        <div>Hello World</div>
+      </React.Suspense>,
+      element,
+    );
+  });
 });
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.js b/packages/react-reconciler/src/ReactFiberHydrationContext.js
index 018a80886e6e4..61f007daca254 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.js
@@ -404,11 +404,10 @@ function skipPastDehydratedSuspenseInstance(
   let suspenseState: null | SuspenseState = fiber.memoizedState;
   let suspenseInstance: null | SuspenseInstance =
     suspenseState !== null ? suspenseState.dehydrated : null;
-  invariant(
-    suspenseInstance,
-    'Expected to have a hydrated suspense instance. ' +
-      'This error is likely caused by a bug in React. Please file an issue.',
-  );
+  if (suspenseInstance === null) {
+    // This Suspense boundary was hydrated without a match.
+    return nextHydratableInstance;
+  }
   return getNextHydratableInstanceAfterSuspenseInstance(suspenseInstance);
 }