From be884f084a297b0339becbfbc3c4b202ffbef72f Mon Sep 17 00:00:00 2001 From: acdlite Date: Wed, 4 Oct 2023 15:03:01 +0000 Subject: [PATCH] Warn if optimistic state is updated outside of a transition (#27454) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ### Based on #27453 If optimistic state is updated, and there's no startTransition on the stack, there are two likely scenarios. One possibility is that the optimistic update is triggered by a regular event handler (e.g. `onSubmit`) instead of an action. This is a mistake and we will warn. The other possibility is the optimistic update is inside an async action, but after an `await`. In this case, we can make it "just work" by associating the optimistic update with the pending async action. Technically it's possible that the optimistic update is unrelated to the pending action, but we don't have a way of knowing this for sure because browsers currently do not provide a way to track async scope. (The AsyncContext proposal, if it lands, will solve this in the future.) However, this is no different than the problem of unrelated transitions being grouped together — it's not wrong per se, but it's not ideal. Once AsyncContext starts landing in browsers, we will provide better warnings in development for these cases. DiffTrain build for commit https://github.com/facebook/react/commit/88d56b8e818d0c48eb6642303169c1fadeb99d59. --- .../react-test-renderer/cjs/ReactTestRenderer-dev.js | 8 ++++---- .../react-test-renderer/cjs/ReactTestRenderer-prod.js | 4 ++-- .../cjs/ReactTestRenderer-profiling.js | 4 ++-- .../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 +- .../js/react-native-github/Libraries/Renderer/REVISION | 2 +- .../Renderer/implementations/ReactFabric-dev.fb.js | 8 ++++---- .../implementations/ReactNativeRenderer-dev.fb.js | 8 ++++---- 9 files changed, 20 insertions(+), 20 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 f76deea014..ba5d17585a 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 @@ -7,7 +7,7 @@ * @noflow * @nolint * @preventMunge - * @generated SignedSource<> + * @generated SignedSource<<85d4c20d55cfdfd42f825208f96c046d>> */ 'use strict'; @@ -8153,14 +8153,14 @@ function startTransition( higherEventPriority(previousPriority, ContinuousEventPriority) ); var prevTransition = ReactCurrentBatchConfig$2.transition; + var currentTransition = {}; { ReactCurrentBatchConfig$2.transition = null; dispatchSetState(fiber, queue, pendingState); + ReactCurrentBatchConfig$2.transition = currentTransition; } - var currentTransition = (ReactCurrentBatchConfig$2.transition = {}); - { ReactCurrentBatchConfig$2.transition._updatedFibers = new Set(); } @@ -23997,7 +23997,7 @@ function createFiberRoot( return root; } -var ReactVersion = "18.3.0-canary-bd6891742-20231004"; +var ReactVersion = "18.3.0-canary-88d56b8e8-20231004"; // 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 f64ee33e8d..217414bc38 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 @@ -8623,7 +8623,7 @@ var devToolsConfig$jscomp$inline_1030 = { throw Error("TestRenderer does not support findFiberByHostInstance()"); }, bundleType: 0, - version: "18.3.0-canary-bd6891742-20231004", + version: "18.3.0-canary-88d56b8e8-20231004", rendererPackageName: "react-test-renderer" }; var internals$jscomp$inline_1229 = { @@ -8654,7 +8654,7 @@ var internals$jscomp$inline_1229 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-canary-bd6891742-20231004" + reconcilerVersion: "18.3.0-canary-88d56b8e8-20231004" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_1230 = __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 3f3e5d2c39..ddabf62ec3 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 @@ -9049,7 +9049,7 @@ var devToolsConfig$jscomp$inline_1072 = { throw Error("TestRenderer does not support findFiberByHostInstance()"); }, bundleType: 0, - version: "18.3.0-canary-bd6891742-20231004", + version: "18.3.0-canary-88d56b8e8-20231004", rendererPackageName: "react-test-renderer" }; var internals$jscomp$inline_1270 = { @@ -9080,7 +9080,7 @@ var internals$jscomp$inline_1270 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-canary-bd6891742-20231004" + reconcilerVersion: "18.3.0-canary-88d56b8e8-20231004" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_1271 = __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 372ec57b8e..54982ddc4a 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-canary-bd6891742-20231004"; +var ReactVersion = "18.3.0-canary-88d56b8e8-20231004"; // 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 a0548e9d3c..eeadc221c4 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 @@ -616,4 +616,4 @@ exports.useSyncExternalStore = function ( exports.useTransition = function () { return ReactCurrentDispatcher.current.useTransition(); }; -exports.version = "18.3.0-canary-bd6891742-20231004"; +exports.version = "18.3.0-canary-88d56b8e8-20231004"; 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 9d46a13c33..5db6ab881b 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 @@ -619,7 +619,7 @@ exports.useSyncExternalStore = function ( exports.useTransition = function () { return ReactCurrentDispatcher.current.useTransition(); }; -exports.version = "18.3.0-canary-bd6891742-20231004"; +exports.version = "18.3.0-canary-88d56b8e8-20231004"; /* 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 index f1b863324d..f8cf8651e8 100644 --- 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 @@ -bd6891742c606a4b8d6ce53760218c6ab3784b38 +88d56b8e818d0c48eb6642303169c1fadeb99d59 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 2d77997493..93cd1416f9 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 @@ -7,7 +7,7 @@ * @noflow * @nolint * @preventMunge - * @generated SignedSource<> + * @generated SignedSource<> */ 'use strict'; @@ -12065,14 +12065,14 @@ function startTransition( higherEventPriority(previousPriority, ContinuousEventPriority) ); var prevTransition = ReactCurrentBatchConfig$2.transition; + var currentTransition = {}; { ReactCurrentBatchConfig$2.transition = null; dispatchSetState(fiber, queue, pendingState); + ReactCurrentBatchConfig$2.transition = currentTransition; } - var currentTransition = (ReactCurrentBatchConfig$2.transition = {}); - { ReactCurrentBatchConfig$2.transition._updatedFibers = new Set(); } @@ -27063,7 +27063,7 @@ function createFiberRoot( return root; } -var ReactVersion = "18.3.0-canary-4227b2ef"; +var ReactVersion = "18.3.0-canary-112791ea"; function createPortal$1( children, 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 a901a70b50..d0c8b04c4b 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 @@ -7,7 +7,7 @@ * @noflow * @nolint * @preventMunge - * @generated SignedSource<<4d93f2723dd9dce45836c9aa389d421c>> + * @generated SignedSource<<543fb8317c4df4706b2ce72a1d3b1115>> */ 'use strict'; @@ -12361,14 +12361,14 @@ function startTransition( higherEventPriority(previousPriority, ContinuousEventPriority) ); var prevTransition = ReactCurrentBatchConfig$2.transition; + var currentTransition = {}; { ReactCurrentBatchConfig$2.transition = null; dispatchSetState(fiber, queue, pendingState); + ReactCurrentBatchConfig$2.transition = currentTransition; } - var currentTransition = (ReactCurrentBatchConfig$2.transition = {}); - { ReactCurrentBatchConfig$2.transition._updatedFibers = new Set(); } @@ -27553,7 +27553,7 @@ function createFiberRoot( return root; } -var ReactVersion = "18.3.0-canary-35bc08a0"; +var ReactVersion = "18.3.0-canary-7f160471"; function createPortal$1( children,