From 8df739c794b1c3d9e89a519ca2e7468764c28048 Mon Sep 17 00:00:00 2001 From: acdlite Date: Tue, 21 Mar 2023 02:14:51 +0000 Subject: [PATCH] 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 commit https://github.com/facebook/react/commit/77ba1618a528787baaa8e007fadaff93a86fb675. --- .../vendor/react-test-renderer/cjs/ReactTestRenderer-dev.js | 4 ++-- .../react-test-renderer/cjs/ReactTestRenderer-prod.js | 6 +++--- .../react-test-renderer/cjs/ReactTestRenderer-profiling.js | 6 +++--- .../xplat/js/RKJSModules/vendor/react/cjs/React-dev.js | 2 +- .../xplat/js/RKJSModules/vendor/react/cjs/React-prod.js | 2 +- .../js/RKJSModules/vendor/react/cjs/React-profiling.js | 2 +- .../Renderer/implementations/ReactFabric-dev.fb.js | 4 ++-- .../Renderer/implementations/ReactFabric-prod.fb.js | 6 +++--- .../Renderer/implementations/ReactFabric-profiling.fb.js | 6 +++--- .../Renderer/implementations/ReactNativeRenderer-dev.fb.js | 4 ++-- .../Renderer/implementations/ReactNativeRenderer-prod.fb.js | 6 +++--- .../implementations/ReactNativeRenderer-profiling.fb.js | 6 +++--- 12 files changed, 27 insertions(+), 27 deletions(-) diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-dev.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-dev.js index 2e858ccebbdec..a8fc03895658f 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-dev.js +++ b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-dev.js @@ -15116,7 +15116,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; @@ -23588,7 +23588,7 @@ function createFiberRoot( return root; } -var ReactVersion = "18.3.0-next-520f7f3ed-20230320"; +var ReactVersion = "18.3.0-next-77ba1618a-20230320"; // Might add PROFILE later. diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-prod.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-prod.js index cc3eb124bef3b..3597e9362fa7b 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-prod.js +++ b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-prod.js @@ -4507,7 +4507,7 @@ function completeWork(current, workInProgress, renderLanes) { null !== hydrationErrors && (queueRecoverableErrors(hydrationErrors), (hydrationErrors = null)), (index = !0); - if (!index) return workInProgress.flags & 65536 ? workInProgress : null; + if (!index) return workInProgress.flags & 256 ? workInProgress : null; } if (0 !== (workInProgress.flags & 128)) return (workInProgress.lanes = renderLanes), workInProgress; @@ -8561,7 +8561,7 @@ var devToolsConfig$jscomp$inline_1013 = { throw Error("TestRenderer does not support findFiberByHostInstance()"); }, bundleType: 0, - version: "18.3.0-next-520f7f3ed-20230320", + version: "18.3.0-next-77ba1618a-20230320", rendererPackageName: "react-test-renderer" }; var internals$jscomp$inline_1201 = { @@ -8592,7 +8592,7 @@ var internals$jscomp$inline_1201 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-next-520f7f3ed-20230320" + reconcilerVersion: "18.3.0-next-77ba1618a-20230320" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_1202 = __REACT_DEVTOOLS_GLOBAL_HOOK__; diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-profiling.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-profiling.js index b93765a1a63ed..a9357d161d530 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-profiling.js +++ b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-profiling.js @@ -4650,7 +4650,7 @@ function completeWork(current, workInProgress, renderLanes) { null !== hydrationErrors && (queueRecoverableErrors(hydrationErrors), (hydrationErrors = null)), (index = !0); - if (!index) return workInProgress.flags & 65536 ? workInProgress : null; + if (!index) return workInProgress.flags & 256 ? workInProgress : null; } if (0 !== (workInProgress.flags & 128)) return ( @@ -8988,7 +8988,7 @@ var devToolsConfig$jscomp$inline_1054 = { throw Error("TestRenderer does not support findFiberByHostInstance()"); }, bundleType: 0, - version: "18.3.0-next-520f7f3ed-20230320", + version: "18.3.0-next-77ba1618a-20230320", rendererPackageName: "react-test-renderer" }; var internals$jscomp$inline_1240 = { @@ -9019,7 +9019,7 @@ var internals$jscomp$inline_1240 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-next-520f7f3ed-20230320" + reconcilerVersion: "18.3.0-next-77ba1618a-20230320" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_1241 = __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 index 22177360e62ab..8acd1027f8ce7 100644 --- 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-next-520f7f3ed-20230320"; +var ReactVersion = "18.3.0-next-77ba1618a-20230320"; // 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 index 024f2a58b17b3..160212ce80ea1 100644 --- 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 @@ -639,4 +639,4 @@ exports.useSyncExternalStore = function ( ); }; exports.useTransition = useTransition; -exports.version = "18.3.0-next-520f7f3ed-20230320"; +exports.version = "18.3.0-next-77ba1618a-20230320"; 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 index a94e3e695f403..94df43564cbd1 100644 --- 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 @@ -642,7 +642,7 @@ exports.useSyncExternalStore = function ( ); }; exports.useTransition = useTransition; -exports.version = "18.3.0-next-520f7f3ed-20230320"; +exports.version = "18.3.0-next-77ba1618a-20230320"; /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */ if ( diff --git a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-dev.fb.js b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-dev.fb.js index 37d0adb5b9131..add6d1a144dc3 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-dev.fb.js +++ b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-dev.fb.js @@ -18687,7 +18687,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; @@ -26342,7 +26342,7 @@ function createFiberRoot( return root; } -var ReactVersion = "18.3.0-next-520f7f3ed-20230320"; +var ReactVersion = "18.3.0-next-77ba1618a-20230320"; function createPortal$1( children, diff --git a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-prod.fb.js b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-prod.fb.js index 3a32626ac45d6..8d4300e817ad5 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-prod.fb.js +++ b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-prod.fb.js @@ -5837,7 +5837,7 @@ function completeWork(current, workInProgress, renderLanes) { (queueRecoverableErrors(hydrationErrors), (hydrationErrors = null)), (currentInstance = !0); if (!currentInstance) - return workInProgress.flags & 65536 ? workInProgress : null; + return workInProgress.flags & 256 ? workInProgress : null; } if (0 !== (workInProgress.flags & 128)) return (workInProgress.lanes = renderLanes), workInProgress; @@ -9496,7 +9496,7 @@ var roots = new Map(), devToolsConfig$jscomp$inline_1033 = { findFiberByHostInstance: getInstanceFromNode, bundleType: 0, - version: "18.3.0-next-520f7f3ed-20230320", + version: "18.3.0-next-77ba1618a-20230320", rendererPackageName: "react-native-renderer", rendererConfig: { getInspectorDataForViewTag: function () { @@ -9538,7 +9538,7 @@ var internals$jscomp$inline_1276 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-next-520f7f3ed-20230320" + reconcilerVersion: "18.3.0-next-77ba1618a-20230320" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_1277 = __REACT_DEVTOOLS_GLOBAL_HOOK__; diff --git a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-profiling.fb.js b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-profiling.fb.js index bb723fb97eab4..047ec74ebbb9c 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-profiling.fb.js +++ b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-profiling.fb.js @@ -6107,7 +6107,7 @@ function completeWork(current, workInProgress, renderLanes) { (queueRecoverableErrors(hydrationErrors), (hydrationErrors = null)), (currentInstance = !0); if (!currentInstance) - return workInProgress.flags & 65536 ? workInProgress : null; + return workInProgress.flags & 256 ? workInProgress : null; } if (0 !== (workInProgress.flags & 128)) return ( @@ -10206,7 +10206,7 @@ var roots = new Map(), devToolsConfig$jscomp$inline_1110 = { findFiberByHostInstance: getInstanceFromNode, bundleType: 0, - version: "18.3.0-next-520f7f3ed-20230320", + version: "18.3.0-next-77ba1618a-20230320", rendererPackageName: "react-native-renderer", rendererConfig: { getInspectorDataForViewTag: function () { @@ -10261,7 +10261,7 @@ var roots = new Map(), scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-next-520f7f3ed-20230320" + reconcilerVersion: "18.3.0-next-77ba1618a-20230320" }); exports.createPortal = function (children, containerTag) { return createPortal$1( diff --git a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactNativeRenderer-dev.fb.js b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactNativeRenderer-dev.fb.js index b43f1a8139452..a3422987aa75a 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactNativeRenderer-dev.fb.js +++ b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactNativeRenderer-dev.fb.js @@ -19347,7 +19347,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; @@ -27393,7 +27393,7 @@ function createFiberRoot( return root; } -var ReactVersion = "18.3.0-next-520f7f3ed-20230320"; +var ReactVersion = "18.3.0-next-77ba1618a-20230320"; function createPortal$1( children, diff --git a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactNativeRenderer-prod.fb.js b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactNativeRenderer-prod.fb.js index 236fcf8fcf12e..1d81615b2cad9 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactNativeRenderer-prod.fb.js +++ b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactNativeRenderer-prod.fb.js @@ -5960,7 +5960,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; @@ -9685,7 +9685,7 @@ var roots = new Map(), devToolsConfig$jscomp$inline_1095 = { findFiberByHostInstance: getInstanceFromTag, bundleType: 0, - version: "18.3.0-next-520f7f3ed-20230320", + version: "18.3.0-next-77ba1618a-20230320", rendererPackageName: "react-native-renderer", rendererConfig: { getInspectorDataForViewTag: function () { @@ -9727,7 +9727,7 @@ var internals$jscomp$inline_1345 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-next-520f7f3ed-20230320" + reconcilerVersion: "18.3.0-next-77ba1618a-20230320" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_1346 = __REACT_DEVTOOLS_GLOBAL_HOOK__; diff --git a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactNativeRenderer-profiling.fb.js b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactNativeRenderer-profiling.fb.js index d22edb968a1d7..9930acf957bef 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactNativeRenderer-profiling.fb.js +++ b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactNativeRenderer-profiling.fb.js @@ -6229,7 +6229,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 ( @@ -10395,7 +10395,7 @@ var roots = new Map(), devToolsConfig$jscomp$inline_1172 = { findFiberByHostInstance: getInstanceFromTag, bundleType: 0, - version: "18.3.0-next-520f7f3ed-20230320", + version: "18.3.0-next-77ba1618a-20230320", rendererPackageName: "react-native-renderer", rendererConfig: { getInspectorDataForViewTag: function () { @@ -10450,7 +10450,7 @@ var roots = new Map(), scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-next-520f7f3ed-20230320" + reconcilerVersion: "18.3.0-next-77ba1618a-20230320" }); exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = { computeComponentStackForErrorReporting: function (reactTag) {