Selective Hydration: Don't suspend if showing fallback (#27230)

A transition that flows into a dehydrated boundary should not suspend if the boundary is showing a fallback. This is related to another issue where Fizz streams in the initial HTML after a client navigation has already happened. That issue is not fixed by this commit, but it does make it less likely. Need to think more about the larger issue. DiffTrain build for [ab31a9e](ab31a9e)
facebook · Aug 25, 2023 · b1f8e0d · b1f8e0d
1 parent 3129e28
commit b1f8e0d
Show file tree

Hide file tree

Showing 20 changed files with 304 additions and 284 deletions.
diff --git a/compiled/facebook-www/REVISION b/compiled/facebook-www/REVISION
@@ -1 +1 @@
-9d4582dffdea5b4dcb6a6093ea848d15423c7701
+ab31a9ed28d340172440e4b12e27d2af689249b3
diff --git a/compiled/facebook-www/React-dev.classic.js b/compiled/facebook-www/React-dev.classic.js
@@ -27,7 +27,7 @@ if (
 }
           "use strict";
 
-var ReactVersion = "18.3.0-www-classic-66a3bd33";
+var ReactVersion = "18.3.0-www-classic-b5d591d4";
 
 // ATTENTION
 // When adding new symbols to this file,

diff --git a/compiled/facebook-www/React-dev.modern.js b/compiled/facebook-www/React-dev.modern.js
@@ -27,7 +27,7 @@ if (
 }
           "use strict";
 
-var ReactVersion = "18.3.0-www-modern-fd93b451";
+var ReactVersion = "18.3.0-www-modern-ad388db9";
 
 // ATTENTION
 // When adding new symbols to this file,

diff --git a/compiled/facebook-www/React-prod.modern.js b/compiled/facebook-www/React-prod.modern.js
@@ -615,4 +615,4 @@ exports.useSyncExternalStore = function (
 exports.useTransition = function () {
   return ReactCurrentDispatcher.current.useTransition();
 };
-exports.version = "18.3.0-www-modern-c4e10a32";
+exports.version = "18.3.0-www-modern-e80fccd0";
diff --git a/compiled/facebook-www/ReactART-dev.classic.js b/compiled/facebook-www/ReactART-dev.classic.js
@@ -69,7 +69,7 @@ function _assertThisInitialized(self) {
   return self;
 }
 
-var ReactVersion = "18.3.0-www-classic-9148dd07";
+var ReactVersion = "18.3.0-www-classic-217d7ffa";
 
 var LegacyRoot = 0;
 var ConcurrentRoot = 1;
@@ -15714,7 +15714,11 @@ function updateDehydratedSuspenseComponent(
       // a pass where we hydrate this subtree in place using the previous Context and then
       // reapply the update afterwards.
 
-      renderDidSuspendDelayIfPossible();
+      if (isSuspenseInstancePending());
+      else {
+        renderDidSuspendDelayIfPossible();
+      }
+
       return retrySuspenseComponentWithoutHydrating(
         current,
         workInProgress,

diff --git a/compiled/facebook-www/ReactART-dev.modern.js b/compiled/facebook-www/ReactART-dev.modern.js
@@ -69,7 +69,7 @@ function _assertThisInitialized(self) {
   return self;
 }
 
-var ReactVersion = "18.3.0-www-modern-3c71bf82";
+var ReactVersion = "18.3.0-www-modern-a127d0ff";
 
 var LegacyRoot = 0;
 var ConcurrentRoot = 1;
@@ -15414,7 +15414,11 @@ function updateDehydratedSuspenseComponent(
       // a pass where we hydrate this subtree in place using the previous Context and then
       // reapply the update afterwards.
 
-      renderDidSuspendDelayIfPossible();
+      if (isSuspenseInstancePending());
+      else {
+        renderDidSuspendDelayIfPossible();
+      }
+
       return retrySuspenseComponentWithoutHydrating(
         current,
         workInProgress,

diff --git a/compiled/facebook-www/ReactART-prod.classic.js b/compiled/facebook-www/ReactART-prod.classic.js
@@ -4840,7 +4840,7 @@ function updateDehydratedSuspenseComponent(
           SelectiveHydrationException)
         );
     }
-    renderDidSuspendDelayIfPossible();
+    shim$2() || renderDidSuspendDelayIfPossible();
     return retrySuspenseComponentWithoutHydrating(
       current,
       workInProgress,
@@ -10091,7 +10091,7 @@ var slice = Array.prototype.slice,
       return null;
     },
     bundleType: 0,
-    version: "18.3.0-www-classic-66a3bd33",
+    version: "18.3.0-www-classic-b5d591d4",
     rendererPackageName: "react-art"
   };
 var internals$jscomp$inline_1303 = {
@@ -10122,7 +10122,7 @@ var internals$jscomp$inline_1303 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-www-classic-66a3bd33"
+  reconcilerVersion: "18.3.0-www-classic-b5d591d4"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_1304 = __REACT_DEVTOOLS_GLOBAL_HOOK__;

diff --git a/compiled/facebook-www/ReactART-prod.modern.js b/compiled/facebook-www/ReactART-prod.modern.js
@@ -4599,7 +4599,7 @@ function updateDehydratedSuspenseComponent(
           SelectiveHydrationException)
         );
     }
-    renderDidSuspendDelayIfPossible();
+    shim$2() || renderDidSuspendDelayIfPossible();
     return retrySuspenseComponentWithoutHydrating(
       current,
       workInProgress,
@@ -9756,7 +9756,7 @@ var slice = Array.prototype.slice,
       return null;
     },
     bundleType: 0,
-    version: "18.3.0-www-modern-2994e97d",
+    version: "18.3.0-www-modern-de287969",
     rendererPackageName: "react-art"
   };
 var internals$jscomp$inline_1283 = {
@@ -9787,7 +9787,7 @@ var internals$jscomp$inline_1283 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-www-modern-2994e97d"
+  reconcilerVersion: "18.3.0-www-modern-de287969"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_1284 = __REACT_DEVTOOLS_GLOBAL_HOOK__;

diff --git a/compiled/facebook-www/ReactDOM-dev.classic.js b/compiled/facebook-www/ReactDOM-dev.classic.js
@@ -20556,7 +20556,11 @@ function updateDehydratedSuspenseComponent(
       // a pass where we hydrate this subtree in place using the previous Context and then
       // reapply the update afterwards.
 
-      renderDidSuspendDelayIfPossible();
+      if (isSuspenseInstancePending(suspenseInstance));
+      else {
+        renderDidSuspendDelayIfPossible();
+      }
+
       return retrySuspenseComponentWithoutHydrating(
         current,
         workInProgress,
@@ -33960,7 +33964,7 @@ function createFiberRoot(
   return root;
 }
 
-var ReactVersion = "18.3.0-www-classic-763d3541";
+var ReactVersion = "18.3.0-www-classic-18629a7a";
 
 function createPortal$1(
   children,

diff --git a/compiled/facebook-www/ReactDOM-dev.modern.js b/compiled/facebook-www/ReactDOM-dev.modern.js
@@ -20441,7 +20441,11 @@ function updateDehydratedSuspenseComponent(
       // a pass where we hydrate this subtree in place using the previous Context and then
       // reapply the update afterwards.
 
-      renderDidSuspendDelayIfPossible();
+      if (isSuspenseInstancePending(suspenseInstance));
+      else {
+        renderDidSuspendDelayIfPossible();
+      }
+
       return retrySuspenseComponentWithoutHydrating(
         current,
         workInProgress,
@@ -33805,7 +33809,7 @@ function createFiberRoot(
   return root;
 }
 
-var ReactVersion = "18.3.0-www-modern-3c71bf82";
+var ReactVersion = "18.3.0-www-modern-a127d0ff";
 
 function createPortal$1(
   children,

diff --git a/compiled/facebook-www/ReactDOM-prod.classic.js b/compiled/facebook-www/ReactDOM-prod.classic.js
@@ -5798,14 +5798,14 @@ function updateDehydratedSuspenseComponent(
       return (
         pushPrimaryTreeSuspenseHandler(workInProgress),
         (workInProgress.flags &= -257),
-        (suspenseState = createCapturedValue(
+        (suspenseInstance = createCapturedValue(
           Error(formatProdErrorMessage(422))
         )),
         retrySuspenseComponentWithoutHydrating(
           current,
           workInProgress,
           renderLanes,
-          suspenseState
+          suspenseInstance
         )
       );
     if (null !== workInProgress.memoizedState)
@@ -5816,31 +5816,31 @@ function updateDehydratedSuspenseComponent(
         null
       );
     reuseSuspenseHandlerOnStack(workInProgress);
-    suspenseState = nextProps.fallback;
-    suspenseInstance = workInProgress.mode;
+    suspenseInstance = nextProps.fallback;
+    suspenseState = workInProgress.mode;
     nextProps = createFiberFromOffscreen(
       { mode: "visible", children: nextProps.children },
-      suspenseInstance,
+      suspenseState,
       0,
       null
     );
-    suspenseState = createFiberFromFragment(
-      suspenseState,
+    suspenseInstance = createFiberFromFragment(
       suspenseInstance,
+      suspenseState,
       renderLanes,
       null
     );
-    suspenseState.flags |= 2;
+    suspenseInstance.flags |= 2;
     nextProps.return = workInProgress;
-    suspenseState.return = workInProgress;
-    nextProps.sibling = suspenseState;
+    suspenseInstance.return = workInProgress;
+    nextProps.sibling = suspenseInstance;
     workInProgress.child = nextProps;
     0 !== (workInProgress.mode & 1) &&
       reconcileChildFibers(workInProgress, current.child, null, renderLanes);
     workInProgress.child.memoizedState =
       mountSuspenseOffscreenState(renderLanes);
     workInProgress.memoizedState = SUSPENDED_MARKER;
-    return suspenseState;
+    return suspenseInstance;
   }
   pushPrimaryTreeSuspenseHandler(workInProgress);
   if (0 === (workInProgress.mode & 1))
@@ -5851,18 +5851,22 @@ function updateDehydratedSuspenseComponent(
       null
     );
   if ("$!" === suspenseInstance.data) {
-    suspenseState =
+    suspenseInstance =
       suspenseInstance.nextSibling && suspenseInstance.nextSibling.dataset;
-    if (suspenseState) var digest = suspenseState.dgst;
-    suspenseState = digest;
-    nextProps = Error(formatProdErrorMessage(419));
-    nextProps.digest = suspenseState;
-    suspenseState = createCapturedValue(nextProps, suspenseState, void 0);
+    if (suspenseInstance) var digest = suspenseInstance.dgst;
+    suspenseInstance = digest;
+    suspenseState = Error(formatProdErrorMessage(419));
+    suspenseState.digest = suspenseInstance;
+    suspenseInstance = createCapturedValue(
+      suspenseState,
+      suspenseInstance,
+      void 0
+    );
     return retrySuspenseComponentWithoutHydrating(
       current,
       workInProgress,
       renderLanes,
-      suspenseState
+      suspenseInstance
     );
   }
   enableLazyContextPropagation &&
@@ -5872,19 +5876,18 @@ function updateDehydratedSuspenseComponent(
   if (didReceiveUpdate || digest) {
     nextProps = workInProgressRoot;
     if (null !== nextProps) {
-      suspenseInstance = renderLanes & -renderLanes;
-      if (enableUnifiedSyncLane && 0 !== (suspenseInstance & 42))
-        suspenseInstance = 1;
+      digest = renderLanes & -renderLanes;
+      if (enableUnifiedSyncLane && 0 !== (digest & 42)) digest = 1;
       else
-        switch (suspenseInstance) {
+        switch (digest) {
           case 2:
-            suspenseInstance = 1;
+            digest = 1;
             break;
           case 8:
-            suspenseInstance = 4;
+            digest = 4;
             break;
           case 32:
-            suspenseInstance = 16;
+            digest = 16;
             break;
           case 128:
           case 256:
@@ -5906,30 +5909,25 @@ function updateDehydratedSuspenseComponent(
           case 16777216:
           case 33554432:
           case 67108864:
-            suspenseInstance = 64;
+            digest = 64;
             break;
           case 536870912:
-            suspenseInstance = 268435456;
+            digest = 268435456;
             break;
           default:
-            suspenseInstance = 0;
+            digest = 0;
         }
-      suspenseInstance =
-        0 !== (suspenseInstance & (nextProps.suspendedLanes | renderLanes))
-          ? 0
-          : suspenseInstance;
-      if (
-        0 !== suspenseInstance &&
-        suspenseInstance !== suspenseState.retryLane
-      )
+      digest =
+        0 !== (digest & (nextProps.suspendedLanes | renderLanes)) ? 0 : digest;
+      if (0 !== digest && digest !== suspenseState.retryLane)
         throw (
-          ((suspenseState.retryLane = suspenseInstance),
-          enqueueConcurrentRenderForLane(current, suspenseInstance),
-          scheduleUpdateOnFiber(nextProps, current, suspenseInstance),
+          ((suspenseState.retryLane = digest),
+          enqueueConcurrentRenderForLane(current, digest),
+          scheduleUpdateOnFiber(nextProps, current, digest),
           SelectiveHydrationException)
         );
     }
-    renderDidSuspendDelayIfPossible();
+    "$?" !== suspenseInstance.data && renderDidSuspendDelayIfPossible();
     return retrySuspenseComponentWithoutHydrating(
       current,
       workInProgress,
@@ -16671,7 +16669,7 @@ Internals.Events = [
 var devToolsConfig$jscomp$inline_1783 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "18.3.0-www-classic-13155cf9",
+  version: "18.3.0-www-classic-c01203f3",
   rendererPackageName: "react-dom"
 };
 var internals$jscomp$inline_2140 = {
@@ -16701,7 +16699,7 @@ var internals$jscomp$inline_2140 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-www-classic-13155cf9"
+  reconcilerVersion: "18.3.0-www-classic-c01203f3"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_2141 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -16940,4 +16938,4 @@ exports.unstable_renderSubtreeIntoContainer = function (
   );
 };
 exports.unstable_runWithPriority = runWithPriority;
-exports.version = "18.3.0-www-classic-13155cf9";
+exports.version = "18.3.0-www-classic-c01203f3";