From f5a0c7e862b458440d7cb70cbf5e1eb6592cab68 Mon Sep 17 00:00:00 2001 From: rubennorte Date: Wed, 13 Mar 2024 10:04:05 +0000 Subject: [PATCH] [RN] Use microtasks in the RN renderer based on a global flag defined by RN (#28472) ## Summary We want to enable the new event loop in React Native (https://github.com/react-native-community/discussions-and-proposals/pull/744) for all users in the new architecture (determined by the use of bridgeless, not by the use of Fabric). In order to leverage that, we need to also set the flag for the React reconciler to use microtasks for scheduling (so we'll execute them at the right time in the new event loop). This migrates from the previous approach using a dynamic flag (to be used at Meta) with the check of a global set by React Native. The reason for doing this is: 1) We still need to determine this dynamically in OSS (based on Bridgeless, not on Fabric). 2) We still need the ability to configure the behavior at Meta, and for internal build system reasons we cannot access the flag that enables microtasks in [`ReactNativeFeatureFlags`](https://github.com/facebook/react-native/blob/6c28c87c4d5d8a9f5be5e02cd7d3eba5b4aaca8c/packages/react-native/src/private/featureflags/ReactNativeFeatureFlags.js#L121). ## How did you test this change? Manually synchronized the changes to React Native and ran all tests for the new architecture on it. Also tested manually. > [!NOTE] > This change depends on https://github.com/facebook/react-native/pull/43397 which has been merged already DiffTrain build for commit https://github.com/facebook/react/commit/bb0944fe5bdd619be918621a9a1647204d6e7ce1. --- .../cjs/ReactTestRenderer-dev.js | 2 +- .../cjs/ReactTestRenderer-prod.js | 4 ++-- .../cjs/ReactTestRenderer-profiling.js | 4 ++-- .../RKJSModules/vendor/react/cjs/React-dev.js | 2 +- .../RKJSModules/vendor/react/cjs/React-prod.js | 2 +- .../vendor/react/cjs/React-profiling.js | 2 +- .../Libraries/Renderer/REVISION | 2 +- .../implementations/ReactFabric-dev.fb.js | 10 +++++----- .../implementations/ReactFabric-prod.fb.js | 17 +++++++++-------- .../implementations/ReactFabric-profiling.fb.js | 17 +++++++++-------- 10 files changed, 32 insertions(+), 30 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 65d9c16fec..5f253cd84c 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 @@ -25454,7 +25454,7 @@ if (__DEV__) { return root; } - var ReactVersion = "18.3.0-canary-d46989150-20240312"; + var ReactVersion = "18.3.0-canary-bb0944fe5-20240313"; // 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 84f98bc6ad..1c0d59d5c6 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 @@ -9175,7 +9175,7 @@ var devToolsConfig$jscomp$inline_1016 = { throw Error("TestRenderer does not support findFiberByHostInstance()"); }, bundleType: 0, - version: "18.3.0-canary-d46989150-20240312", + version: "18.3.0-canary-bb0944fe5-20240313", rendererPackageName: "react-test-renderer" }; var internals$jscomp$inline_1194 = { @@ -9206,7 +9206,7 @@ var internals$jscomp$inline_1194 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-canary-d46989150-20240312" + reconcilerVersion: "18.3.0-canary-bb0944fe5-20240313" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_1195 = __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 a61f264844..145213688a 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 @@ -9603,7 +9603,7 @@ var devToolsConfig$jscomp$inline_1058 = { throw Error("TestRenderer does not support findFiberByHostInstance()"); }, bundleType: 0, - version: "18.3.0-canary-d46989150-20240312", + version: "18.3.0-canary-bb0944fe5-20240313", rendererPackageName: "react-test-renderer" }; var internals$jscomp$inline_1235 = { @@ -9634,7 +9634,7 @@ var internals$jscomp$inline_1235 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-canary-d46989150-20240312" + reconcilerVersion: "18.3.0-canary-bb0944fe5-20240313" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_1236 = __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 7e7fc47447..0f7ea41cae 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 @@ -26,7 +26,7 @@ if (__DEV__) { } var dynamicFlags = require("ReactNativeInternalFeatureFlags"); - var ReactVersion = "18.3.0-canary-d46989150-20240312"; + var ReactVersion = "18.3.0-canary-bb0944fe5-20240313"; // 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 5220f32d9c..3029ea7536 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 @@ -628,4 +628,4 @@ exports.useSyncExternalStore = function ( exports.useTransition = function () { return ReactCurrentDispatcher.current.useTransition(); }; -exports.version = "18.3.0-canary-d46989150-20240312"; +exports.version = "18.3.0-canary-bb0944fe5-20240313"; 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 24cfb25ddb..2f895cc8bc 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 @@ -624,7 +624,7 @@ exports.useSyncExternalStore = function ( exports.useTransition = function () { return ReactCurrentDispatcher.current.useTransition(); }; -exports.version = "18.3.0-canary-d46989150-20240312"; +exports.version = "18.3.0-canary-bb0944fe5-20240313"; "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 index fd7fea8950..b693942916 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 @@ -d46989150e9225f2bf299dbca2270596d0829a58 +bb0944fe5bdd619be918621a9a1647204d6e7ce1 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 05d6625ac8..ea4ecadba2 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<<80123652bb9b7be7f517855aca5ff3f1>> + * @generated SignedSource<<9378c92e70cea9a594311fbdc67e5fa3>> */ "use strict"; @@ -2987,8 +2987,6 @@ to return true:wantsResponderID| | enableUseRefAccessWarning = dynamicFlags.enableUseRefAccessWarning, passChildrenWhenCloningPersistedNodes = dynamicFlags.passChildrenWhenCloningPersistedNodes, - useMicrotasksForSchedulingInFabric = - dynamicFlags.useMicrotasksForSchedulingInFabric, useModernStrictMode = dynamicFlags.useModernStrictMode; // The rest of the flags are static for better dead code elimination. var enableSchedulingProfiler = true; var enableProfilerTimer = true; @@ -5029,7 +5027,9 @@ to return true:wantsResponderID| | // Microtasks // ------------------- - var supportsMicrotasks = useMicrotasksForSchedulingInFabric; + var supportsMicrotasks = + typeof RN$enableMicrotasksInReact !== "undefined" && + !!RN$enableMicrotasksInReact; var scheduleMicrotask = typeof queueMicrotask === "function" ? queueMicrotask : scheduleTimeout; @@ -29801,7 +29801,7 @@ to return true:wantsResponderID| | return root; } - var ReactVersion = "18.3.0-canary-04bb7356"; + var ReactVersion = "18.3.0-canary-61d1189b"; 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 2f9cd0c341..d49df34fc1 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 @@ -7,7 +7,7 @@ * @noflow * @nolint * @preventMunge - * @generated SignedSource<<79ffaa0355a9d9b89df41eabe7496793>> + * @generated SignedSource<<15dc76ff98842d803f8a59fa78e23283>> */ "use strict"; @@ -1278,8 +1278,6 @@ var alwaysThrottleRetries = dynamicFlags.alwaysThrottleRetries, enableUseRefAccessWarning = dynamicFlags.enableUseRefAccessWarning, passChildrenWhenCloningPersistedNodes = dynamicFlags.passChildrenWhenCloningPersistedNodes, - useMicrotasksForSchedulingInFabric = - dynamicFlags.useMicrotasksForSchedulingInFabric, scheduleCallback$3 = Scheduler.unstable_scheduleCallback, cancelCallback$1 = Scheduler.unstable_cancelCallback, shouldYield = Scheduler.unstable_shouldYield, @@ -1601,8 +1599,11 @@ function cloneHiddenInstance(instance) { canonical: instance.canonical }; } -var scheduleMicrotask = - "function" === typeof queueMicrotask ? queueMicrotask : scheduleTimeout; +var supportsMicrotasks = + "undefined" !== typeof RN$enableMicrotasksInReact && + !!RN$enableMicrotasksInReact, + scheduleMicrotask = + "function" === typeof queueMicrotask ? queueMicrotask : scheduleTimeout; function getInstanceFromNode(node) { return null != node.canonical && null != node.canonical.internalInstanceHandle ? node.canonical.internalInstanceHandle @@ -2329,7 +2330,7 @@ function scheduleTaskForRootDuringMicrotask(root, currentTime) { return currentTime; } function scheduleImmediateTask(cb) { - useMicrotasksForSchedulingInFabric + supportsMicrotasks ? scheduleMicrotask(function () { 0 !== (executionContext & 6) ? scheduleCallback$3(ImmediatePriority, cb) @@ -10625,7 +10626,7 @@ var roots = new Map(), devToolsConfig$jscomp$inline_1103 = { findFiberByHostInstance: getInstanceFromNode, bundleType: 0, - version: "18.3.0-canary-119507e5", + version: "18.3.0-canary-1aaf050f", rendererPackageName: "react-native-renderer", rendererConfig: { getInspectorDataForInstance: getInspectorDataForInstance, @@ -10668,7 +10669,7 @@ var internals$jscomp$inline_1330 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-canary-119507e5" + reconcilerVersion: "18.3.0-canary-1aaf050f" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_1331 = __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 9589c9262c..d0bf5460af 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 @@ -7,7 +7,7 @@ * @noflow * @nolint * @preventMunge - * @generated SignedSource<<3a1a367017d4c9c4d53a27776b68c3f9>> + * @generated SignedSource<> */ "use strict"; @@ -1282,8 +1282,6 @@ var alwaysThrottleRetries = dynamicFlags.alwaysThrottleRetries, enableUseRefAccessWarning = dynamicFlags.enableUseRefAccessWarning, passChildrenWhenCloningPersistedNodes = dynamicFlags.passChildrenWhenCloningPersistedNodes, - useMicrotasksForSchedulingInFabric = - dynamicFlags.useMicrotasksForSchedulingInFabric, scheduleCallback$3 = Scheduler.unstable_scheduleCallback, cancelCallback$1 = Scheduler.unstable_cancelCallback, shouldYield = Scheduler.unstable_shouldYield, @@ -1723,8 +1721,11 @@ function cloneHiddenInstance(instance) { canonical: instance.canonical }; } -var scheduleMicrotask = - "function" === typeof queueMicrotask ? queueMicrotask : scheduleTimeout; +var supportsMicrotasks = + "undefined" !== typeof RN$enableMicrotasksInReact && + !!RN$enableMicrotasksInReact, + scheduleMicrotask = + "function" === typeof queueMicrotask ? queueMicrotask : scheduleTimeout; function getInstanceFromNode(node) { return null != node.canonical && null != node.canonical.internalInstanceHandle ? node.canonical.internalInstanceHandle @@ -2453,7 +2454,7 @@ function scheduleTaskForRootDuringMicrotask(root, currentTime) { return currentTime; } function scheduleImmediateTask(cb) { - useMicrotasksForSchedulingInFabric + supportsMicrotasks ? scheduleMicrotask(function () { 0 !== (executionContext & 6) ? scheduleCallback$3(ImmediatePriority, cb) @@ -11331,7 +11332,7 @@ var roots = new Map(), devToolsConfig$jscomp$inline_1184 = { findFiberByHostInstance: getInstanceFromNode, bundleType: 0, - version: "18.3.0-canary-ca9ab9fa", + version: "18.3.0-canary-7d52778b", rendererPackageName: "react-native-renderer", rendererConfig: { getInspectorDataForInstance: getInspectorDataForInstance, @@ -11387,7 +11388,7 @@ var roots = new Map(), scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-canary-ca9ab9fa" + reconcilerVersion: "18.3.0-canary-7d52778b" }); exports.createPortal = function (children, containerTag) { return createPortal$1(