Revert facebook#24236 (Don't recreate the same fallback on the client…

… if hydrating suspends)
gaearon · Apr 25, 2022 · 02e1722 · 02e1722
1 parent 6d3b6d0
commit 02e1722
Show file tree

Hide file tree

Showing 9 changed files with 322 additions and 307 deletions.
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
diff --git a/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js b/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js
@@ -792,7 +792,7 @@ describe('ReactDOMServerHydration', () => {
       });
 
       // @gate __DEV__
-      it('does not warn when client renders an extra node inside Suspense fallback', () => {
+      it('warns when client renders an extra node inside Suspense fallback', () => {
         function Mismatch({isClient}) {
           return (
             <div className="parent">
@@ -809,12 +809,15 @@ describe('ReactDOMServerHydration', () => {
             </div>
           );
         }
-        // There is no error because we don't actually hydrate fallbacks.
-        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`Array []`);
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+          Array [
+            "Caught [The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.]",
+          ]
+        `);
       });
 
       // @gate __DEV__
-      it('does not warn when server renders an extra node inside Suspense fallback', () => {
+      it('warns when server renders an extra node inside Suspense fallback', () => {
         function Mismatch({isClient}) {
           return (
             <div className="parent">
@@ -831,8 +834,11 @@ describe('ReactDOMServerHydration', () => {
             </div>
           );
         }
-        // There is no error because we don't actually hydrate fallbacks.
-        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`Array []`);
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+          Array [
+            "Caught [The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.]",
+          ]
+        `);
       });
     });
 

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -2115,7 +2115,10 @@ describe('ReactDOMServerPartialHydration', () => {
     });
 
     suspend = true;
-    expect(Scheduler).toFlushAndYield([]);
+    expect(Scheduler).toFlushAndYield([
+      'The server could not finish this Suspense boundary, likely due to ' +
+        'an error during server rendering. Switched to client rendering.',
+    ]);
 
     // We haven't hydrated the second child but the placeholder is still in the list.
     expect(container.textContent).toBe('ALoading B');

diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -2270,7 +2270,6 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
         } else {
           // Suspended but we should no longer be in dehydrated mode.
           // Therefore we now have to render the fallback.
-          renderDidSuspendDelayIfPossible();
           const nextPrimaryChildren = nextProps.children;
           const nextFallbackChildren = nextProps.fallback;
           const fallbackChildFragment = mountSuspenseFallbackAfterRetryWithoutHydrating(

diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -2270,7 +2270,6 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
         } else {
           // Suspended but we should no longer be in dehydrated mode.
           // Therefore we now have to render the fallback.
-          renderDidSuspendDelayIfPossible();
           const nextPrimaryChildren = nextProps.children;
           const nextFallbackChildren = nextProps.fallback;
           const fallbackChildFragment = mountSuspenseFallbackAfterRetryWithoutHydrating(

diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -459,6 +459,9 @@ export function includesOnlyNonUrgentLanes(lanes: Lanes) {
   const UrgentLanes = SyncLane | InputContinuousLane | DefaultLane;
   return (lanes & UrgentLanes) === NoLanes;
 }
+export function includesOnlyTransitions(lanes: Lanes) {
+  return (lanes & TransitionLanes) === lanes;
+}
 
 export function includesBlockingLane(root: FiberRoot, lanes: Lanes) {
   if (

diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -459,6 +459,9 @@ export function includesOnlyNonUrgentLanes(lanes: Lanes) {
   const UrgentLanes = SyncLane | InputContinuousLane | DefaultLane;
   return (lanes & UrgentLanes) === NoLanes;
 }
+export function includesOnlyTransitions(lanes: Lanes) {
+  return (lanes & TransitionLanes) === lanes;
+}
 
 export function includesBlockingLane(root: FiberRoot, lanes: Lanes) {
   if (

diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -131,7 +131,7 @@ import {
   pickArbitraryLane,
   includesNonIdleWork,
   includesOnlyRetries,
-  includesOnlyNonUrgentLanes,
+  includesOnlyTransitions,
   includesBlockingLane,
   includesExpiredLane,
   getNextLanes,
@@ -1150,7 +1150,7 @@ function finishConcurrentRender(root, exitStatus, lanes) {
     case RootSuspendedWithDelay: {
       markRootSuspended(root, lanes);
 
-      if (includesOnlyNonUrgentLanes(lanes)) {
+      if (includesOnlyTransitions(lanes)) {
         // This is a transition, so we should exit without committing a
         // placeholder and without scheduling a timeout. Delay indefinitely
         // until we receive more data.

diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -131,7 +131,7 @@ import {
   pickArbitraryLane,
   includesNonIdleWork,
   includesOnlyRetries,
-  includesOnlyNonUrgentLanes,
+  includesOnlyTransitions,
   includesBlockingLane,
   includesExpiredLane,
   getNextLanes,
@@ -1150,7 +1150,7 @@ function finishConcurrentRender(root, exitStatus, lanes) {
     case RootSuspendedWithDelay: {
       markRootSuspended(root, lanes);
 
-      if (includesOnlyNonUrgentLanes(lanes)) {
+      if (includesOnlyTransitions(lanes)) {
         // This is a transition, so we should exit without committing a
         // placeholder and without scheduling a timeout. Delay indefinitely
         // until we receive more data.