Bugfix: Remove extra render pass when reverting to client render (#26445

) (This was reviewed and approved as part of #26380; I'm extracting it into its own PR so that it can bisected later if it causes an issue.) I noticed while working on a PR that when an error happens during hydration, and we revert to client rendering, React actually does _two_ additional render passes instead of just one. We didn't notice it earlier because none of our tests happened to assert on how many renders it took to recover, only on the final output. It's possible this extra render pass had other consequences that I'm not aware of, like messing with some assumption in the recoverable errors logic. This adds a test to demonstrate the issue. (One problem is that we don't have much test coverage of this scenario in the first place, which likely would have caught this earlier.) DiffTrain build for [77ba161](77ba161)
facebook · Mar 21, 2023 · 2473ff0 · 2473ff0
1 parent c226b42
commit 2473ff0
Show file tree

Hide file tree

Showing 18 changed files with 58 additions and 58 deletions.
diff --git a/compiled/facebook-www/REVISION b/compiled/facebook-www/REVISION
@@ -1 +1 @@
-520f7f3ed4d01e9e50a73d7d04ff138e3c71ac86
+77ba1618a528787baaa8e007fadaff93a86fb675
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-04bef010";
+var ReactVersion = "18.3.0-www-modern-1423f459";
 
 // ATTENTION
 // When adding new symbols to this file,

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-5ff0222e";
+var ReactVersion = "18.3.0-www-classic-26dea44b";
 
 var LegacyRoot = 0;
 var ConcurrentRoot = 1;
@@ -18226,7 +18226,7 @@ function completeWork(current, workInProgress, renderLanes) {
           );
 
         if (!fallthroughToNormalSuspensePath) {
-          if (workInProgress.flags & ShouldCapture) {
+          if (workInProgress.flags & ForceClientRender) {
             // Special case. There were remaining unhydrated nodes. We treat
             // this as a mismatch. Revert to client rendering.
             return 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-3f875f9f";
+var ReactVersion = "18.3.0-www-modern-faee710c";
 
 var LegacyRoot = 0;
 var ConcurrentRoot = 1;
@@ -17908,7 +17908,7 @@ function completeWork(current, workInProgress, renderLanes) {
           );
 
         if (!fallthroughToNormalSuspensePath) {
-          if (workInProgress.flags & ShouldCapture) {
+          if (workInProgress.flags & ForceClientRender) {
             // Special case. There were remaining unhydrated nodes. We treat
             // this as a mismatch. Revert to client rendering.
             return workInProgress;

diff --git a/compiled/facebook-www/ReactART-prod.classic.js b/compiled/facebook-www/ReactART-prod.classic.js
@@ -5507,7 +5507,7 @@ function completeWork(current, workInProgress, renderLanes) {
             (queueRecoverableErrors(hydrationErrors), (hydrationErrors = null)),
             (instance = !0);
         if (!instance)
-          return workInProgress.flags & 65536 ? workInProgress : null;
+          return workInProgress.flags & 256 ? workInProgress : null;
       }
       if (0 !== (workInProgress.flags & 128))
         return (workInProgress.lanes = renderLanes), workInProgress;
@@ -9945,7 +9945,7 @@ var slice = Array.prototype.slice,
       return null;
     },
     bundleType: 0,
-    version: "18.3.0-www-classic-dc41ab8a",
+    version: "18.3.0-www-classic-12f727b0",
     rendererPackageName: "react-art"
   };
 var internals$jscomp$inline_1333 = {
@@ -9976,7 +9976,7 @@ var internals$jscomp$inline_1333 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-www-classic-dc41ab8a"
+  reconcilerVersion: "18.3.0-www-classic-12f727b0"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_1334 = __REACT_DEVTOOLS_GLOBAL_HOOK__;

diff --git a/compiled/facebook-www/ReactART-prod.modern.js b/compiled/facebook-www/ReactART-prod.modern.js
@@ -5252,7 +5252,7 @@ function completeWork(current, workInProgress, renderLanes) {
             (queueRecoverableErrors(hydrationErrors), (hydrationErrors = null)),
             (instance = !0);
         if (!instance)
-          return workInProgress.flags & 65536 ? workInProgress : null;
+          return workInProgress.flags & 256 ? workInProgress : null;
       }
       if (0 !== (workInProgress.flags & 128))
         return (workInProgress.lanes = renderLanes), workInProgress;
@@ -9610,7 +9610,7 @@ var slice = Array.prototype.slice,
       return null;
     },
     bundleType: 0,
-    version: "18.3.0-www-modern-4e328d6f",
+    version: "18.3.0-www-modern-86a50993",
     rendererPackageName: "react-art"
   };
 var internals$jscomp$inline_1313 = {
@@ -9641,7 +9641,7 @@ var internals$jscomp$inline_1313 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-www-modern-4e328d6f"
+  reconcilerVersion: "18.3.0-www-modern-86a50993"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_1314 = __REACT_DEVTOOLS_GLOBAL_HOOK__;

diff --git a/compiled/facebook-www/ReactDOM-dev.classic.js b/compiled/facebook-www/ReactDOM-dev.classic.js
@@ -28399,7 +28399,7 @@ function completeDehydratedSuspenseBoundary(
   ) {
     warnIfUnhydratedTailNodes(workInProgress);
     resetHydrationState();
-    workInProgress.flags |= ForceClientRender | Incomplete | ShouldCapture;
+    workInProgress.flags |= ForceClientRender | DidCapture;
     return false;
   }
 
@@ -28846,7 +28846,7 @@ function completeWork(current, workInProgress, renderLanes) {
           );
 
         if (!fallthroughToNormalSuspensePath) {
-          if (workInProgress.flags & ShouldCapture) {
+          if (workInProgress.flags & ForceClientRender) {
             // Special case. There were remaining unhydrated nodes. We treat
             // this as a mismatch. Revert to client rendering.
             return workInProgress;
@@ -39067,7 +39067,7 @@ function createFiberRoot(
   return root;
 }
 
-var ReactVersion = "18.3.0-www-classic-2169d48f";
+var ReactVersion = "18.3.0-www-classic-1e6d53e8";
 
 function createPortal$1(
   children,

diff --git a/compiled/facebook-www/ReactDOM-dev.modern.js b/compiled/facebook-www/ReactDOM-dev.modern.js
@@ -22794,7 +22794,7 @@ function completeDehydratedSuspenseBoundary(
   ) {
     warnIfUnhydratedTailNodes(workInProgress);
     resetHydrationState();
-    workInProgress.flags |= ForceClientRender | Incomplete | ShouldCapture;
+    workInProgress.flags |= ForceClientRender | DidCapture;
     return false;
   }
 
@@ -23234,7 +23234,7 @@ function completeWork(current, workInProgress, renderLanes) {
           );
 
         if (!fallthroughToNormalSuspensePath) {
-          if (workInProgress.flags & ShouldCapture) {
+          if (workInProgress.flags & ForceClientRender) {
             // Special case. There were remaining unhydrated nodes. We treat
             // this as a mismatch. Revert to client rendering.
             return workInProgress;
@@ -33433,7 +33433,7 @@ function createFiberRoot(
   return root;
 }
 
-var ReactVersion = "18.3.0-www-modern-4e328d6f";
+var ReactVersion = "18.3.0-www-modern-86a50993";
 
 function createPortal$1(
   children,

diff --git a/compiled/facebook-www/ReactDOM-prod.classic.js b/compiled/facebook-www/ReactDOM-prod.classic.js
@@ -8170,7 +8170,7 @@ function completeWork(current, workInProgress, renderLanes) {
         )
           warnIfUnhydratedTailNodes(),
             resetHydrationState(),
-            (workInProgress.flags |= 98560),
+            (workInProgress.flags |= 384),
             (type = !1);
         else if (
           ((type = popHydrationState(workInProgress)),
@@ -8193,7 +8193,7 @@ function completeWork(current, workInProgress, renderLanes) {
           null !== hydrationErrors &&
             (queueRecoverableErrors(hydrationErrors), (hydrationErrors = null)),
             (type = !0);
-        if (!type) return workInProgress.flags & 65536 ? workInProgress : null;
+        if (!type) return workInProgress.flags & 256 ? workInProgress : null;
       }
       if (0 !== (workInProgress.flags & 128))
         return (workInProgress.lanes = renderLanes), workInProgress;
@@ -15813,7 +15813,7 @@ Internals.Events = [
 var devToolsConfig$jscomp$inline_1776 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "18.3.0-www-classic-603bd603",
+  version: "18.3.0-www-classic-51aa2339",
   rendererPackageName: "react-dom"
 };
 var internals$jscomp$inline_2156 = {
@@ -15843,7 +15843,7 @@ var internals$jscomp$inline_2156 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-www-classic-603bd603"
+  reconcilerVersion: "18.3.0-www-classic-51aa2339"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_2157 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -16083,4 +16083,4 @@ exports.unstable_renderSubtreeIntoContainer = function (
   );
 };
 exports.unstable_runWithPriority = runWithPriority;
-exports.version = "18.3.0-www-classic-603bd603";
+exports.version = "18.3.0-www-classic-51aa2339";
diff --git a/compiled/facebook-www/ReactDOM-prod.modern.js b/compiled/facebook-www/ReactDOM-prod.modern.js
@@ -6792,7 +6792,7 @@ function completeWork(current, workInProgress, renderLanes) {
         )
           warnIfUnhydratedTailNodes(),
             resetHydrationState(),
-            (workInProgress.flags |= 98560),
+            (workInProgress.flags |= 384),
             (type = !1);
         else if (
           ((type = popHydrationState(workInProgress)),
@@ -6815,7 +6815,7 @@ function completeWork(current, workInProgress, renderLanes) {
           null !== hydrationErrors &&
             (queueRecoverableErrors(hydrationErrors), (hydrationErrors = null)),
             (type = !0);
-        if (!type) return workInProgress.flags & 65536 ? workInProgress : null;
+        if (!type) return workInProgress.flags & 256 ? workInProgress : null;
       }
       if (0 !== (workInProgress.flags & 128))
         return (workInProgress.lanes = renderLanes), workInProgress;
@@ -15336,7 +15336,7 @@ Internals.Events = [
 var devToolsConfig$jscomp$inline_1746 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "18.3.0-www-modern-6b3ee97f",
+  version: "18.3.0-www-modern-549fc09d",
   rendererPackageName: "react-dom"
 };
 var internals$jscomp$inline_2144 = {
@@ -15367,7 +15367,7 @@ var internals$jscomp$inline_2144 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-www-modern-6b3ee97f"
+  reconcilerVersion: "18.3.0-www-modern-549fc09d"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_2145 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -15536,4 +15536,4 @@ exports.unstable_createEventHandle = function (type, options) {
   return eventHandle;
 };
 exports.unstable_runWithPriority = runWithPriority;
-exports.version = "18.3.0-www-modern-6b3ee97f";
+exports.version = "18.3.0-www-modern-549fc09d";
diff --git a/compiled/facebook-www/ReactDOM-profiling.classic.js b/compiled/facebook-www/ReactDOM-profiling.classic.js
@@ -8452,7 +8452,7 @@ function completeWork(current, workInProgress, renderLanes) {
         )
           warnIfUnhydratedTailNodes(),
             resetHydrationState(),
-            (workInProgress.flags |= 98560),
+            (workInProgress.flags |= 384),
             (type = !1);
         else if (
           ((type = popHydrationState(workInProgress)),
@@ -8486,7 +8486,7 @@ function completeWork(current, workInProgress, renderLanes) {
           null !== hydrationErrors &&
             (queueRecoverableErrors(hydrationErrors), (hydrationErrors = null)),
             (type = !0);
-        if (!type) return workInProgress.flags & 65536 ? workInProgress : null;
+        if (!type) return workInProgress.flags & 256 ? workInProgress : null;
       }
       if (0 !== (workInProgress.flags & 128))
         return (
@@ -16587,7 +16587,7 @@ Internals.Events = [
 var devToolsConfig$jscomp$inline_1856 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "18.3.0-www-classic-a14531a3",
+  version: "18.3.0-www-classic-9681b897",
   rendererPackageName: "react-dom"
 };
 (function (internals) {
@@ -16631,7 +16631,7 @@ var devToolsConfig$jscomp$inline_1856 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-www-classic-a14531a3"
+  reconcilerVersion: "18.3.0-www-classic-9681b897"
 });
 assign(Internals, {
   ReactBrowserEventEmitter: {
@@ -16858,7 +16858,7 @@ exports.unstable_renderSubtreeIntoContainer = function (
   );
 };
 exports.unstable_runWithPriority = runWithPriority;
-exports.version = "18.3.0-www-classic-a14531a3";
+exports.version = "18.3.0-www-classic-9681b897";
 
           /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
 if (

diff --git a/compiled/facebook-www/ReactDOM-profiling.modern.js b/compiled/facebook-www/ReactDOM-profiling.modern.js
@@ -7072,7 +7072,7 @@ function completeWork(current, workInProgress, renderLanes) {
         )
           warnIfUnhydratedTailNodes(),
             resetHydrationState(),
-            (workInProgress.flags |= 98560),
+            (workInProgress.flags |= 384),
             (type = !1);
         else if (
           ((type = popHydrationState(workInProgress)),
@@ -7106,7 +7106,7 @@ function completeWork(current, workInProgress, renderLanes) {
           null !== hydrationErrors &&
             (queueRecoverableErrors(hydrationErrors), (hydrationErrors = null)),
             (type = !0);
-        if (!type) return workInProgress.flags & 65536 ? workInProgress : null;
+        if (!type) return workInProgress.flags & 256 ? workInProgress : null;
       }
       if (0 !== (workInProgress.flags & 128))
         return (
@@ -16108,7 +16108,7 @@ Internals.Events = [
 var devToolsConfig$jscomp$inline_1826 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "18.3.0-www-modern-6eace276",
+  version: "18.3.0-www-modern-586e60fb",
   rendererPackageName: "react-dom"
 };
 (function (internals) {
@@ -16153,7 +16153,7 @@ var devToolsConfig$jscomp$inline_1826 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-www-modern-6eace276"
+  reconcilerVersion: "18.3.0-www-modern-586e60fb"
 });
 exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = Internals;
 exports.createPortal = function (children, container) {
@@ -16309,7 +16309,7 @@ exports.unstable_createEventHandle = function (type, options) {
   return eventHandle;
 };
 exports.unstable_runWithPriority = runWithPriority;
-exports.version = "18.3.0-www-modern-6eace276";
+exports.version = "18.3.0-www-modern-586e60fb";
 
           /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
 if (

diff --git a/compiled/facebook-www/ReactDOMTesting-dev.classic.js b/compiled/facebook-www/ReactDOMTesting-dev.classic.js
@@ -25620,7 +25620,7 @@ function completeDehydratedSuspenseBoundary(
   ) {
     warnIfUnhydratedTailNodes(workInProgress);
     resetHydrationState();
-    workInProgress.flags |= ForceClientRender | Incomplete | ShouldCapture;
+    workInProgress.flags |= ForceClientRender | DidCapture;
     return false;
   }
 
@@ -26067,7 +26067,7 @@ function completeWork(current, workInProgress, renderLanes) {
           );
 
         if (!fallthroughToNormalSuspensePath) {
-          if (workInProgress.flags & ShouldCapture) {
+          if (workInProgress.flags & ForceClientRender) {
             // Special case. There were remaining unhydrated nodes. We treat
             // this as a mismatch. Revert to client rendering.
             return workInProgress;
@@ -36771,7 +36771,7 @@ function createFiberRoot(
   return root;
 }
 
-var ReactVersion = "18.3.0-www-classic-83f377c3";
+var ReactVersion = "18.3.0-www-classic-07e6678b";
 
 function createPortal$1(
   children,

diff --git a/compiled/facebook-www/ReactDOMTesting-dev.modern.js b/compiled/facebook-www/ReactDOMTesting-dev.modern.js
@@ -22928,7 +22928,7 @@ function completeDehydratedSuspenseBoundary(
   ) {
     warnIfUnhydratedTailNodes(workInProgress);
     resetHydrationState();
-    workInProgress.flags |= ForceClientRender | Incomplete | ShouldCapture;
+    workInProgress.flags |= ForceClientRender | DidCapture;
     return false;
   }
 
@@ -23368,7 +23368,7 @@ function completeWork(current, workInProgress, renderLanes) {
           );
 
         if (!fallthroughToNormalSuspensePath) {
-          if (workInProgress.flags & ShouldCapture) {
+          if (workInProgress.flags & ForceClientRender) {
             // Special case. There were remaining unhydrated nodes. We treat
             // this as a mismatch. Revert to client rendering.
             return workInProgress;
@@ -34050,7 +34050,7 @@ function createFiberRoot(
   return root;
 }
 
-var ReactVersion = "18.3.0-www-modern-a435d23e";
+var ReactVersion = "18.3.0-www-modern-10946e6a";
 
 function createPortal$1(
   children,
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		520f7f3ed4d01e9e50a73d7d04ff138e3c71ac86
		77ba1618a528787baaa8e007fadaff93a86fb675