Move tail hydration mismatch back to hydration context (#28501)

In #23176 we added a special case in completeWork for SuspenseBoundaries if they still have trailing children. However, that misses a case because it doesn't log a recoverable error for the hydration mismatch. So we get an error that we rerendered. I think this special case was done to avoid contexts getting out of sync. I don't know why we didn't just move where the pop happens though so that's what I did here and let the regular pass throw instead. Seems to be pass the tests. DiffTrain build for commit c11b196.
facebook · Mar 6, 2024 · 7d53888 · 7d53888
1 parent 010c604
commit 7d53888
Show file tree

Hide file tree

Showing 13 changed files with 88 additions and 51 deletions.
diff --git a/...ook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-dev.js b/...ook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-dev.js
@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<78b0af382001ac231b9f1246e965d57b>>
+ * @generated SignedSource<<bc3ffb1cb29e8a4af3d060e1e199ebfc>>
  */
 
 "use strict";
@@ -17075,7 +17075,6 @@ if (__DEV__) {
         }
 
         case SuspenseComponent: {
-          popSuspenseHandler(workInProgress);
           var nextState = workInProgress.memoizedState; // Special path for dehydrated boundaries. We may eventually move this
           // to its own fiber type so that we can add other kinds of hydration
           // boundaries that aren't associated with a Suspense tree. In anticipation
@@ -17096,17 +17095,21 @@ if (__DEV__) {
 
             if (!fallthroughToNormalSuspensePath) {
               if (workInProgress.flags & ForceClientRender) {
-                // Special case. There were remaining unhydrated nodes. We treat
+                popSuspenseHandler(workInProgress); // Special case. There were remaining unhydrated nodes. We treat
                 // this as a mismatch. Revert to client rendering.
+
                 return workInProgress;
               } else {
-                // Did not finish hydrating, either because this is the initial
+                popSuspenseHandler(workInProgress); // Did not finish hydrating, either because this is the initial
                 // render or because something suspended.
+
                 return null;
               }
             } // Continue with the normal Suspense path.
           }
 
+          popSuspenseHandler(workInProgress);
+
           if ((workInProgress.flags & DidCapture) !== NoFlags$1) {
             // Something suspended. Re-render with the fallback children.
             workInProgress.lanes = renderLanes; // Do not reset the effect list.
@@ -25733,7 +25736,7 @@ if (__DEV__) {
       return root;
     }
 
-    var ReactVersion = "18.3.0-canary-966d17483-20240305";
+    var ReactVersion = "18.3.0-canary-c11b196ae-20240305";
 
     // Might add PROFILE later.
 

diff --git a/...ok-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-prod.js b/...ok-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-prod.js
@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<9709781bdd6feccf0ca9738138d835d3>>
+ * @generated SignedSource<<ae8df36bd7abef975eb0e74298e0e1bb>>
  */
 
 "use strict";
@@ -5256,7 +5256,6 @@ function completeWork(current, workInProgress, renderLanes) {
       bubbleProperties(workInProgress);
       return null;
     case 13:
-      popSuspenseHandler(workInProgress);
       newProps = workInProgress.memoizedState;
       if (
         null === current ||
@@ -5281,8 +5280,14 @@ function completeWork(current, workInProgress, renderLanes) {
           null !== hydrationErrors &&
             (queueRecoverableErrors(hydrationErrors), (hydrationErrors = null)),
             (index = !0);
-        if (!index) return workInProgress.flags & 256 ? workInProgress : null;
+        if (!index) {
+          if (workInProgress.flags & 256)
+            return popSuspenseHandler(workInProgress), workInProgress;
+          popSuspenseHandler(workInProgress);
+          return null;
+        }
       }
+      popSuspenseHandler(workInProgress);
       if (0 !== (workInProgress.flags & 128))
         return (workInProgress.lanes = renderLanes), workInProgress;
       renderLanes = null !== newProps;
@@ -9173,7 +9178,7 @@ var devToolsConfig$jscomp$inline_1014 = {
     throw Error("TestRenderer does not support findFiberByHostInstance()");
   },
   bundleType: 0,
-  version: "18.3.0-canary-966d17483-20240305",
+  version: "18.3.0-canary-c11b196ae-20240305",
   rendererPackageName: "react-test-renderer"
 };
 var internals$jscomp$inline_1195 = {
@@ -9204,7 +9209,7 @@ var internals$jscomp$inline_1195 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-canary-966d17483-20240305"
+  reconcilerVersion: "18.3.0-canary-c11b196ae-20240305"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_1196 = __REACT_DEVTOOLS_GLOBAL_HOOK__;

diff --git a/...source/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-profiling.js b/...source/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-profiling.js
@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<b20c26683aec6ca4ced107db94e0a031>>
+ * @generated SignedSource<<468afdc5511d0a33f94018471424df06>>
  */
 
 "use strict";
@@ -5398,7 +5398,6 @@ function completeWork(current, workInProgress, renderLanes) {
       bubbleProperties(workInProgress);
       return null;
     case 13:
-      popSuspenseHandler(workInProgress);
       newProps = workInProgress.memoizedState;
       if (
         null === current ||
@@ -5428,8 +5427,14 @@ function completeWork(current, workInProgress, renderLanes) {
           null !== hydrationErrors &&
             (queueRecoverableErrors(hydrationErrors), (hydrationErrors = null)),
             (index = !0);
-        if (!index) return workInProgress.flags & 256 ? workInProgress : null;
+        if (!index) {
+          if (workInProgress.flags & 256)
+            return popSuspenseHandler(workInProgress), workInProgress;
+          popSuspenseHandler(workInProgress);
+          return null;
+        }
       }
+      popSuspenseHandler(workInProgress);
       if (0 !== (workInProgress.flags & 128))
         return (
           (workInProgress.lanes = renderLanes),
@@ -9601,7 +9606,7 @@ var devToolsConfig$jscomp$inline_1056 = {
     throw Error("TestRenderer does not support findFiberByHostInstance()");
   },
   bundleType: 0,
-  version: "18.3.0-canary-966d17483-20240305",
+  version: "18.3.0-canary-c11b196ae-20240305",
   rendererPackageName: "react-test-renderer"
 };
 var internals$jscomp$inline_1236 = {
@@ -9632,7 +9637,7 @@ var internals$jscomp$inline_1236 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-canary-966d17483-20240305"
+  reconcilerVersion: "18.3.0-canary-c11b196ae-20240305"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_1237 = __REACT_DEVTOOLS_GLOBAL_HOOK__;

diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-dev.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-dev.js
@@ -26,7 +26,7 @@ if (__DEV__) {
     }
     var dynamicFlags = require("ReactNativeInternalFeatureFlags");
 
-    var ReactVersion = "18.3.0-canary-966d17483-20240305";
+    var ReactVersion = "18.3.0-canary-c11b196ae-20240305";
 
     // ATTENTION
     // When adding new symbols to this file,

diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-prod.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-prod.js
@@ -598,4 +598,4 @@ exports.useSyncExternalStore = function (
 exports.useTransition = function () {
   return ReactCurrentDispatcher.current.useTransition();
 };
-exports.version = "18.3.0-canary-966d17483-20240305";
+exports.version = "18.3.0-canary-c11b196ae-20240305";
diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-profiling.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-profiling.js
@@ -594,7 +594,7 @@ exports.useSyncExternalStore = function (
 exports.useTransition = function () {
   return ReactCurrentDispatcher.current.useTransition();
 };
-exports.version = "18.3.0-canary-966d17483-20240305";
+exports.version = "18.3.0-canary-c11b196ae-20240305";
 "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
   "function" ===
     typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

diff --git a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/REVISION b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/REVISION
@@ -1 +1 @@
-966d17483c2a628fda36794bc193c7ad2c3124eb
+c11b196ae3e2e3c5d143d9102b35a6b6fa97c849
diff --git a/...rce/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-dev.fb.js b/...rce/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-dev.fb.js
@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<2e4e75c5e196c476c8f1dd730e8063be>>
+ * @generated SignedSource<<195b02708667b43e1288d343dd8c9dea>>
  */
 
 "use strict";
@@ -20208,7 +20208,6 @@ to return true:wantsResponderID|                            |
         }
 
         case SuspenseComponent: {
-          popSuspenseHandler(workInProgress);
           var nextState = workInProgress.memoizedState; // Special path for dehydrated boundaries. We may eventually move this
           // to its own fiber type so that we can add other kinds of hydration
           // boundaries that aren't associated with a Suspense tree. In anticipation
@@ -20229,17 +20228,21 @@ to return true:wantsResponderID|                            |
 
             if (!fallthroughToNormalSuspensePath) {
               if (workInProgress.flags & ForceClientRender) {
-                // Special case. There were remaining unhydrated nodes. We treat
+                popSuspenseHandler(workInProgress); // Special case. There were remaining unhydrated nodes. We treat
                 // this as a mismatch. Revert to client rendering.
+
                 return workInProgress;
               } else {
-                // Did not finish hydrating, either because this is the initial
+                popSuspenseHandler(workInProgress); // Did not finish hydrating, either because this is the initial
                 // render or because something suspended.
+
                 return null;
               }
             } // Continue with the normal Suspense path.
           }
 
+          popSuspenseHandler(workInProgress);
+
           if ((workInProgress.flags & DidCapture) !== NoFlags$1) {
             // Something suspended. Re-render with the fallback children.
             workInProgress.lanes = renderLanes; // Do not reset the effect list.
@@ -28088,7 +28091,7 @@ to return true:wantsResponderID|                            |
       return root;
     }
 
-    var ReactVersion = "18.3.0-canary-d0bc2995";
+    var ReactVersion = "18.3.0-canary-d679cfa2";
 
     function createPortal$1(
       children,

diff --git a/...ce/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-prod.fb.js b/...ce/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-prod.fb.js
@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<a7d6808fc7e276b536e2fadbdd8c3f46>>
+ * @generated SignedSource<<73b775dbdf05bc68c388e7bc468044de>>
  */
 
 "use strict";
@@ -6436,7 +6436,6 @@ function completeWork(current, workInProgress, renderLanes) {
       bubbleProperties(workInProgress);
       return null;
     case 13:
-      popSuspenseHandler(workInProgress);
       newProps = workInProgress.memoizedState;
       if (
         null === current ||
@@ -6461,9 +6460,14 @@ function completeWork(current, workInProgress, renderLanes) {
           null !== hydrationErrors &&
             (queueRecoverableErrors(hydrationErrors), (hydrationErrors = null)),
             (oldProps = !0);
-        if (!oldProps)
-          return workInProgress.flags & 256 ? workInProgress : null;
+        if (!oldProps) {
+          if (workInProgress.flags & 256)
+            return popSuspenseHandler(workInProgress), workInProgress;
+          popSuspenseHandler(workInProgress);
+          return null;
+        }
       }
+      popSuspenseHandler(workInProgress);
       if (0 !== (workInProgress.flags & 128))
         return (workInProgress.lanes = renderLanes), workInProgress;
       newProps = null !== newProps;
@@ -9707,7 +9711,7 @@ var roots = new Map(),
   devToolsConfig$jscomp$inline_1059 = {
     findFiberByHostInstance: getInstanceFromNode,
     bundleType: 0,
-    version: "18.3.0-canary-2f8f605b",
+    version: "18.3.0-canary-f799fa3f",
     rendererPackageName: "react-native-renderer",
     rendererConfig: {
       getInspectorDataForInstance: getInspectorDataForInstance,
@@ -9750,7 +9754,7 @@ var internals$jscomp$inline_1284 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-canary-2f8f605b"
+  reconcilerVersion: "18.3.0-canary-f799fa3f"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_1285 = __REACT_DEVTOOLS_GLOBAL_HOOK__;

diff --git a/...lat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-profiling.fb.js b/...lat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-profiling.fb.js
@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<37fac78cbc4e9cc6b75520ec55ba05c1>>
+ * @generated SignedSource<<bc533ae907b7c59bbe5b77cba5df8f95>>
  */
 
 "use strict";
@@ -6698,7 +6698,6 @@ function completeWork(current, workInProgress, renderLanes) {
       bubbleProperties(workInProgress);
       return null;
     case 13:
-      popSuspenseHandler(workInProgress);
       newProps = workInProgress.memoizedState;
       if (
         null === current ||
@@ -6728,9 +6727,14 @@ function completeWork(current, workInProgress, renderLanes) {
           null !== hydrationErrors &&
             (queueRecoverableErrors(hydrationErrors), (hydrationErrors = null)),
             (oldProps = !0);
-        if (!oldProps)
-          return workInProgress.flags & 256 ? workInProgress : null;
+        if (!oldProps) {
+          if (workInProgress.flags & 256)
+            return popSuspenseHandler(workInProgress), workInProgress;
+          popSuspenseHandler(workInProgress);
+          return null;
+        }
       }
+      popSuspenseHandler(workInProgress);
       if (0 !== (workInProgress.flags & 128))
         return (
           (workInProgress.lanes = renderLanes),
@@ -10409,7 +10413,7 @@ var roots = new Map(),
   devToolsConfig$jscomp$inline_1137 = {
     findFiberByHostInstance: getInstanceFromNode,
     bundleType: 0,
-    version: "18.3.0-canary-f48f6d2a",
+    version: "18.3.0-canary-3a92e945",
     rendererPackageName: "react-native-renderer",
     rendererConfig: {
       getInspectorDataForInstance: getInspectorDataForInstance,
@@ -10465,7 +10469,7 @@ var roots = new Map(),
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-canary-f48f6d2a"
+  reconcilerVersion: "18.3.0-canary-3a92e945"
 });
 exports.createPortal = function (children, containerTag) {
   return createPortal$1(

diff --git a/...t/js/react-native-github/Libraries/Renderer/implementations/ReactNativeRenderer-dev.fb.js b/...t/js/react-native-github/Libraries/Renderer/implementations/ReactNativeRenderer-dev.fb.js
@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<1731e3e66fdf4187797147464b0aa167>>
+ * @generated SignedSource<<7dcdb6d21ac8dfc7ffa1771b9a940965>>
  */
 
 "use strict";
@@ -20250,7 +20250,6 @@ to return true:wantsResponderID|                            |
         }
 
         case SuspenseComponent: {
-          popSuspenseHandler(workInProgress);
           var nextState = workInProgress.memoizedState; // Special path for dehydrated boundaries. We may eventually move this
           // to its own fiber type so that we can add other kinds of hydration
           // boundaries that aren't associated with a Suspense tree. In anticipation
@@ -20271,17 +20270,21 @@ to return true:wantsResponderID|                            |
 
             if (!fallthroughToNormalSuspensePath) {
               if (workInProgress.flags & ForceClientRender) {
-                // Special case. There were remaining unhydrated nodes. We treat
+                popSuspenseHandler(workInProgress); // Special case. There were remaining unhydrated nodes. We treat
                 // this as a mismatch. Revert to client rendering.
+
                 return workInProgress;
               } else {
-                // Did not finish hydrating, either because this is the initial
+                popSuspenseHandler(workInProgress); // Did not finish hydrating, either because this is the initial
                 // render or because something suspended.
+
                 return null;
               }
             } // Continue with the normal Suspense path.
           }
 
+          popSuspenseHandler(workInProgress);
+
           if ((workInProgress.flags & DidCapture) !== NoFlags$1) {
             // Something suspended. Re-render with the fallback children.
             workInProgress.lanes = renderLanes; // Do not reset the effect list.
@@ -28528,7 +28531,7 @@ to return true:wantsResponderID|                            |
       return root;
     }
 
-    var ReactVersion = "18.3.0-canary-aba998f4";
+    var ReactVersion = "18.3.0-canary-469281c1";
 
     function createPortal$1(
       children,