Fix uSES hydration in strict mode (#26791)

Previously, we'd call and use getSnapshot on the second render resulting in `Warning: Text content did not match. Server: "Nay!" Client: "Yay!"` and then `Error: Text content does not match server-rendered HTML.`. Fixes #26095. Closes #26113. Closes #25650. --------- Co-authored-by: eps1lon <[email protected]> DiffTrain build for commit 4cd7065.
facebook · May 12, 2023 · 3546b41 · 3546b41
1 parent 19188c4
commit 3546b41
Show file tree

Hide file tree

Showing 14 changed files with 110 additions and 102 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<<05789326fa400c9b99137d6bc79e813b>>
+ * @generated SignedSource<<ba2153287ac25e256482103ffe8356cc>>
  */
 
 'use strict';
@@ -7505,8 +7505,6 @@ function mountSyncExternalStore(subscribe, getSnapshot, getServerSnapshot) {
   // clean-up function, and we track the deps correctly, we can call pushEffect
   // directly, without storing any additional state. For the same reason, we
   // don't need to set a static flag, either.
-  // TODO: We can move this to the passive phase once we add a pre-commit
-  // consistency check. See the next comment.
 
   fiber.flags |= Passive$1;
   pushEffect(
@@ -7524,18 +7522,22 @@ function updateSyncExternalStore(subscribe, getSnapshot, getServerSnapshot) {
   // normal rules of React, and only works because store updates are
   // always synchronous.
 
-  var nextSnapshot = getSnapshot();
+  var nextSnapshot;
 
   {
-    if (!didWarnUncachedGetSnapshot) {
-      var cachedSnapshot = getSnapshot();
+    nextSnapshot = getSnapshot();
 
-      if (!objectIs(nextSnapshot, cachedSnapshot)) {
-        error(
-          "The result of getSnapshot should be cached to avoid an infinite loop"
-        );
+    {
+      if (!didWarnUncachedGetSnapshot) {
+        var cachedSnapshot = getSnapshot();
 
-        didWarnUncachedGetSnapshot = true;
+        if (!objectIs(nextSnapshot, cachedSnapshot)) {
+          error(
+            "The result of getSnapshot should be cached to avoid an infinite loop"
+          );
+
+          didWarnUncachedGetSnapshot = true;
+        }
       }
     }
   }
@@ -7558,7 +7560,7 @@ function updateSyncExternalStore(subscribe, getSnapshot, getServerSnapshot) {
 
   if (
     inst.getSnapshot !== getSnapshot ||
-    snapshotChanged || // Check if the susbcribe function changed. We can save some memory by
+    snapshotChanged || // Check if the subscribe function changed. We can save some memory by
     // checking whether we scheduled a subscription effect above.
     (workInProgressHook !== null &&
       workInProgressHook.memoizedState.tag & HasEffect)
@@ -7765,7 +7767,8 @@ function updateEffectImpl(fiberFlags, hookFlags, create, deps) {
   var hook = updateWorkInProgressHook();
   var nextDeps = deps === undefined ? null : deps;
   var effect = hook.memoizedState;
-  var inst = effect.inst; // currentHook is null when rerendering after a render phase state update.
+  var inst = effect.inst; // currentHook is null on initial mount when rerendering after a render phase
+  // state update or for strict mode.
 
   if (currentHook !== null) {
     if (nextDeps !== null) {
@@ -23918,7 +23921,7 @@ function createFiberRoot(
   return root;
 }
 
-var ReactVersion = "18.3.0-canary-a389046a5-20230512";
+var ReactVersion = "18.3.0-canary-4cd706566-20230512";
 
 // 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<<96db65489181b812de03003057984aec>>
+ * @generated SignedSource<<45020522021e7a01efc7d244b5d43b9f>>
  */
 
 "use strict";
@@ -2450,12 +2450,12 @@ function rerenderReducer(reducer) {
 function updateMutableSource() {}
 function updateSyncExternalStore(subscribe, getSnapshot) {
   var fiber = currentlyRenderingFiber$1,
-    hook = updateWorkInProgressHook(),
-    nextSnapshot = getSnapshot(),
-    snapshotChanged = !objectIs(
-      (currentHook || hook).memoizedState,
-      nextSnapshot
-    );
+    hook = updateWorkInProgressHook();
+  var nextSnapshot = getSnapshot();
+  var snapshotChanged = !objectIs(
+    (currentHook || hook).memoizedState,
+    nextSnapshot
+  );
   snapshotChanged &&
     ((hook.memoizedState = nextSnapshot), (didReceiveUpdate = !0));
   hook = hook.queue;
@@ -8623,7 +8623,7 @@ var devToolsConfig$jscomp$inline_1039 = {
     throw Error("TestRenderer does not support findFiberByHostInstance()");
   },
   bundleType: 0,
-  version: "18.3.0-canary-a389046a5-20230512",
+  version: "18.3.0-canary-4cd706566-20230512",
   rendererPackageName: "react-test-renderer"
 };
 var internals$jscomp$inline_1238 = {
@@ -8654,7 +8654,7 @@ var internals$jscomp$inline_1238 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-canary-a389046a5-20230512"
+  reconcilerVersion: "18.3.0-canary-4cd706566-20230512"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_1239 = __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<<a726914dca6f5a0f5417978ca8cbfbca>>
+ * @generated SignedSource<<ff667a8669649afcc875e7ac42bdee49>>
  */
 
 "use strict";
@@ -2470,12 +2470,12 @@ function rerenderReducer(reducer) {
 function updateMutableSource() {}
 function updateSyncExternalStore(subscribe, getSnapshot) {
   var fiber = currentlyRenderingFiber$1,
-    hook = updateWorkInProgressHook(),
-    nextSnapshot = getSnapshot(),
-    snapshotChanged = !objectIs(
-      (currentHook || hook).memoizedState,
-      nextSnapshot
-    );
+    hook = updateWorkInProgressHook();
+  var nextSnapshot = getSnapshot();
+  var snapshotChanged = !objectIs(
+    (currentHook || hook).memoizedState,
+    nextSnapshot
+  );
   snapshotChanged &&
     ((hook.memoizedState = nextSnapshot), (didReceiveUpdate = !0));
   hook = hook.queue;
@@ -9049,7 +9049,7 @@ var devToolsConfig$jscomp$inline_1081 = {
     throw Error("TestRenderer does not support findFiberByHostInstance()");
   },
   bundleType: 0,
-  version: "18.3.0-canary-a389046a5-20230512",
+  version: "18.3.0-canary-4cd706566-20230512",
   rendererPackageName: "react-test-renderer"
 };
 var internals$jscomp$inline_1279 = {
@@ -9080,7 +9080,7 @@ var internals$jscomp$inline_1279 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-canary-a389046a5-20230512"
+  reconcilerVersion: "18.3.0-canary-4cd706566-20230512"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_1280 = __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
@@ -27,7 +27,7 @@ if (
 }
           "use strict";
 
-var ReactVersion = "18.3.0-canary-a389046a5-20230512";
+var ReactVersion = "18.3.0-canary-4cd706566-20230512";
 
 // 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
@@ -642,4 +642,4 @@ exports.useSyncExternalStore = function (
   );
 };
 exports.useTransition = useTransition;
-exports.version = "18.3.0-canary-a389046a5-20230512";
+exports.version = "18.3.0-canary-4cd706566-20230512";
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
@@ -645,7 +645,7 @@ exports.useSyncExternalStore = function (
   );
 };
 exports.useTransition = useTransition;
-exports.version = "18.3.0-canary-a389046a5-20230512";
+exports.version = "18.3.0-canary-4cd706566-20230512";
 
           /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
 if (

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 @@
-a389046a529c6d22ba5895dd7f5d4b0b8d17c345
+4cd7065665ea2cf33c306265c8d817904bb401ca
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<<54eb8f73345fa51dfea2180ad48f3201>>
+ * @generated SignedSource<<754c635aea6c866606f009e7a8391f01>>
  */
 
 'use strict';
@@ -11593,8 +11593,6 @@ function mountSyncExternalStore(subscribe, getSnapshot, getServerSnapshot) {
   // clean-up function, and we track the deps correctly, we can call pushEffect
   // directly, without storing any additional state. For the same reason, we
   // don't need to set a static flag, either.
-  // TODO: We can move this to the passive phase once we add a pre-commit
-  // consistency check. See the next comment.
 
   fiber.flags |= Passive$1;
   pushEffect(
@@ -11612,18 +11610,22 @@ function updateSyncExternalStore(subscribe, getSnapshot, getServerSnapshot) {
   // normal rules of React, and only works because store updates are
   // always synchronous.
 
-  var nextSnapshot = getSnapshot();
+  var nextSnapshot;
 
   {
-    if (!didWarnUncachedGetSnapshot) {
-      var cachedSnapshot = getSnapshot();
+    nextSnapshot = getSnapshot();
 
-      if (!objectIs(nextSnapshot, cachedSnapshot)) {
-        error(
-          "The result of getSnapshot should be cached to avoid an infinite loop"
-        );
+    {
+      if (!didWarnUncachedGetSnapshot) {
+        var cachedSnapshot = getSnapshot();
 
-        didWarnUncachedGetSnapshot = true;
+        if (!objectIs(nextSnapshot, cachedSnapshot)) {
+          error(
+            "The result of getSnapshot should be cached to avoid an infinite loop"
+          );
+
+          didWarnUncachedGetSnapshot = true;
+        }
       }
     }
   }
@@ -11646,7 +11648,7 @@ function updateSyncExternalStore(subscribe, getSnapshot, getServerSnapshot) {
 
   if (
     inst.getSnapshot !== getSnapshot ||
-    snapshotChanged || // Check if the susbcribe function changed. We can save some memory by
+    snapshotChanged || // Check if the subscribe function changed. We can save some memory by
     // checking whether we scheduled a subscription effect above.
     (workInProgressHook !== null &&
       workInProgressHook.memoizedState.tag & HasEffect)
@@ -11929,7 +11931,8 @@ function updateEffectImpl(fiberFlags, hookFlags, create, deps) {
   var hook = updateWorkInProgressHook();
   var nextDeps = deps === undefined ? null : deps;
   var effect = hook.memoizedState;
-  var inst = effect.inst; // currentHook is null when rerendering after a render phase state update.
+  var inst = effect.inst; // currentHook is null on initial mount when rerendering after a render phase
+  // state update or for strict mode.
 
   if (currentHook !== null) {
     if (nextDeps !== null) {
@@ -27228,7 +27231,7 @@ function createFiberRoot(
   return root;
 }
 
-var ReactVersion = "18.3.0-canary-6ac9ff4f";
+var ReactVersion = "18.3.0-canary-4a57cab1";
 
 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<<002be8723b574d2d5b0decd37e67b863>>
+ * @generated SignedSource<<8c0d7fc5cf39f06095fd73e80c1ebe68>>
  */
 
 "use strict";
@@ -3948,12 +3948,12 @@ function updateMutableSource(source, getSnapshot, subscribe) {
 }
 function updateSyncExternalStore(subscribe, getSnapshot) {
   var fiber = currentlyRenderingFiber$1,
-    hook = updateWorkInProgressHook(),
-    nextSnapshot = getSnapshot(),
-    snapshotChanged = !objectIs(
-      (currentHook || hook).memoizedState,
-      nextSnapshot
-    );
+    hook = updateWorkInProgressHook();
+  var nextSnapshot = getSnapshot();
+  var snapshotChanged = !objectIs(
+    (currentHook || hook).memoizedState,
+    nextSnapshot
+  );
   snapshotChanged &&
     ((hook.memoizedState = nextSnapshot), (didReceiveUpdate = !0));
   hook = hook.queue;
@@ -9490,7 +9490,7 @@ var roots = new Map(),
   devToolsConfig$jscomp$inline_1063 = {
     findFiberByHostInstance: getInstanceFromNode,
     bundleType: 0,
-    version: "18.3.0-canary-05ff0b62",
+    version: "18.3.0-canary-6afa28ec",
     rendererPackageName: "react-native-renderer",
     rendererConfig: {
       getInspectorDataForViewTag: function () {
@@ -9532,7 +9532,7 @@ var internals$jscomp$inline_1301 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-canary-05ff0b62"
+  reconcilerVersion: "18.3.0-canary-6afa28ec"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_1302 = __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<<6a8621febebb11ad6c74045ebbde17ac>>
+ * @generated SignedSource<<83c12e7e93e6fb4397e7202b48936e05>>
  */
 
 
@@ -4078,12 +4078,12 @@ function updateMutableSource(source, getSnapshot, subscribe) {
 }
 function updateSyncExternalStore(subscribe, getSnapshot) {
   var fiber = currentlyRenderingFiber$1,
-    hook = updateWorkInProgressHook(),
-    nextSnapshot = getSnapshot(),
-    snapshotChanged = !objectIs(
-      (currentHook || hook).memoizedState,
-      nextSnapshot
-    );
+    hook = updateWorkInProgressHook();
+  var nextSnapshot = getSnapshot();
+  var snapshotChanged = !objectIs(
+    (currentHook || hook).memoizedState,
+    nextSnapshot
+  );
   snapshotChanged &&
     ((hook.memoizedState = nextSnapshot), (didReceiveUpdate = !0));
   hook = hook.queue;
@@ -10199,7 +10199,7 @@ var roots = new Map(),
   devToolsConfig$jscomp$inline_1141 = {
     findFiberByHostInstance: getInstanceFromNode,
     bundleType: 0,
-    version: "18.3.0-canary-08cc2b37",
+    version: "18.3.0-canary-4e6ec507",
     rendererPackageName: "react-native-renderer",
     rendererConfig: {
       getInspectorDataForViewTag: function () {
@@ -10254,7 +10254,7 @@ var roots = new Map(),
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-canary-08cc2b37"
+  reconcilerVersion: "18.3.0-canary-4e6ec507"
 });
 exports.createPortal = function (children, containerTag) {
   return createPortal$1(
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		a389046a529c6d22ba5895dd7f5d4b0b8d17c345
		4cd7065665ea2cf33c306265c8d817904bb401ca