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.
Sebastian Markbåge committed
Sep 28, 2019 at 10:43 UTC
d8a76ad5804197108f18b988f6d13c767ab41387
2 files changed
+15
-5
packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
+11
@@ -659,4 +659,15 @@ describe('ReactDOMServerHydration', () => {
659
660
document.body.removeChild(parentContainer);
661
});
662
+
663
+ it('regression test: Suspense + hydration in legacy mode ', () => {
664
+ const element = document.createElement('div');
665
+ element.innerHTML = '<div>Hello World</div>';
666
+ ReactDOM.hydrate(
667
+ <React.Suspense>
668
+ <div>Hello World</div>
669
+ </React.Suspense>,
670
+ element,
671
+ );
672
+ });
673
});
packages/react-reconciler/src/ReactFiberHydrationContext.js
+4
-5
@@ -404,11 +404,10 @@ function skipPastDehydratedSuspenseInstance(
404
let suspenseState: null | SuspenseState = fiber.memoizedState;
405
let suspenseInstance: null | SuspenseInstance =
406
suspenseState !== null ? suspenseState.dehydrated : null;
407
- invariant(
408
- suspenseInstance,
409
- 'Expected to have a hydrated suspense instance. ' +
410
- 'This error is likely caused by a bug in React. Please file an issue.',
411
- );
407
+ if (suspenseInstance === null) {
408
+ // This Suspense boundary was hydrated without a match.
409
+ return nextHydratableInstance;
410
+ }
411
return getNextHydratableInstanceAfterSuspenseInstance(suspenseInstance);
412
}
413