[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
Rubén Norte committed
Mar 13, 2024 at 10:00 UTC
bb0944fe5bdd619be918621a9a1647204d6e7ce1
13 files changed
+11
-15
.eslintrc.js
+1
@@ -427,6 +427,7 @@ module.exports = {
427
files: ['packages/react-native-renderer/**/*.js'],
428
globals: {
429
nativeFabricUIManager: 'readonly',
430
+ RN$enableMicrotasksInReact: 'readonly',
431
},
432
},
433
{
packages/react-native-renderer/src/ReactFiberConfigFabric.js
+6
-5
@@ -47,10 +47,7 @@ const {
47
unstable_getCurrentEventPriority: fabricGetCurrentEventPriority,
48
} = nativeFabricUIManager;
49
50
-import {
51
- useMicrotasksForSchedulingInFabric,
52
- passChildrenWhenCloningPersistedNodes,
53
-} from 'shared/ReactFeatureFlags';
50
+import {passChildrenWhenCloningPersistedNodes} from 'shared/ReactFeatureFlags';
51
52
const {get: getViewConfigForType} = ReactNativeViewConfigRegistry;
53
@@ -507,6 +504,10 @@ export const NotPendingTransition: TransitionStatus = null;
504
// -------------------
505
// Microtasks
506
// -------------------
510
-export const supportsMicrotasks = useMicrotasksForSchedulingInFabric;
507
+
508
+export const supportsMicrotasks: boolean =
509
+ typeof RN$enableMicrotasksInReact !== 'undefined' &&
510
+ !!RN$enableMicrotasksInReact;
511
+
512
export const scheduleMicrotask: any =
513
typeof queueMicrotask === 'function' ? queueMicrotask : scheduleTimeout;
packages/shared/ReactFeatureFlags.js
-2
@@ -115,8 +115,6 @@ export const enableFizzExternalRuntime = true;
115
116
export const alwaysThrottleRetries = true;
117
118
-export const useMicrotasksForSchedulingInFabric = false;
119
-
118
export const passChildrenWhenCloningPersistedNodes = false;
119
120
export const enableUseDeferredValueInitialArg = __EXPERIMENTAL__;
packages/shared/forks/ReactFeatureFlags.native-fb-dynamic.js
-1
@@ -30,7 +30,6 @@ export const enableRenderableContext = __VARIANT__;
30
export const enableUnifiedSyncLane = __VARIANT__;
31
export const enableUseRefAccessWarning = __VARIANT__;
32
export const passChildrenWhenCloningPersistedNodes = __VARIANT__;
33
-export const useMicrotasksForSchedulingInFabric = __VARIANT__;
33
export const useModernStrictMode = __VARIANT__;
34
35
// Flow magic to verify the exports of this file match the original version.
packages/shared/forks/ReactFeatureFlags.native-fb.js
-1
@@ -28,7 +28,6 @@ export const {
28
enableUnifiedSyncLane,
29
enableUseRefAccessWarning,
30
passChildrenWhenCloningPersistedNodes,
31
- useMicrotasksForSchedulingInFabric,
31
useModernStrictMode,
32
} = dynamicFlags;
33
packages/shared/forks/ReactFeatureFlags.native-oss.js
-1
@@ -80,7 +80,6 @@ export const enableAsyncActions = false;
80
81
export const alwaysThrottleRetries = false;
82
83
-export const useMicrotasksForSchedulingInFabric = false;
83
export const passChildrenWhenCloningPersistedNodes = false;
84
export const enableUseDeferredValueInitialArg = __EXPERIMENTAL__;
85
export const disableClientCache = true;
packages/shared/forks/ReactFeatureFlags.test-renderer.js
-1
@@ -78,7 +78,6 @@ export const enableAsyncActions = true;
78
79
export const alwaysThrottleRetries = true;
80
81
-export const useMicrotasksForSchedulingInFabric = false;
81
export const passChildrenWhenCloningPersistedNodes = false;
82
export const enableUseDeferredValueInitialArg = __EXPERIMENTAL__;
83
export const disableClientCache = true;
packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
-1
@@ -78,7 +78,6 @@ export const enableAsyncActions = true;
78
79
export const alwaysThrottleRetries = true;
80
81
-export const useMicrotasksForSchedulingInFabric = false;
81
export const passChildrenWhenCloningPersistedNodes = false;
82
export const enableUseDeferredValueInitialArg = __EXPERIMENTAL__;
83
export const disableClientCache = true;
packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
-1
@@ -79,7 +79,6 @@ export const enableAsyncActions = true;
79
80
export const alwaysThrottleRetries = true;
81
82
-export const useMicrotasksForSchedulingInFabric = false;
82
export const passChildrenWhenCloningPersistedNodes = false;
83
export const enableUseDeferredValueInitialArg = true;
84
export const disableClientCache = true;
packages/shared/forks/ReactFeatureFlags.www.js
-1
@@ -106,7 +106,6 @@ export const enableFizzExternalRuntime = true;
106
107
export const forceConcurrentByDefaultForTesting = false;
108
109
-export const useMicrotasksForSchedulingInFabric = false;
109
export const passChildrenWhenCloningPersistedNodes = false;
110
111
export const enableAsyncDebugInfo = false;
scripts/flow/react-native-host-hooks.js
+2
@@ -167,6 +167,8 @@ declare module 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface'
167
declare module 'react-native/Libraries/ReactPrivate/ReactNativePrivateInitializeCore' {
168
}
169
170
+declare const RN$enableMicrotasksInReact: boolean;
171
+
172
// This is needed for a short term solution.
173
// See https://github.com/facebook/react/pull/15490 for more info
174
declare var nativeFabricUIManager: {
scripts/flow/xplat.js
-1
@@ -18,6 +18,5 @@ declare module 'ReactNativeInternalFeatureFlags' {
18
declare export var enableUnifiedSyncLane: boolean;
19
declare export var enableUseRefAccessWarning: boolean;
20
declare export var passChildrenWhenCloningPersistedNodes: boolean;
21
- declare export var useMicrotasksForSchedulingInFabric: boolean;
21
declare export var useModernStrictMode: boolean;
22
}
scripts/rollup/validate/eslintrc.rn.js
+2
@@ -42,6 +42,8 @@ module.exports = {
42
// Fabric. See https://github.com/facebook/react/pull/15490
43
// for more information
44
nativeFabricUIManager: 'readonly',
45
+ // RN flag to enable microtasks
46
+ RN$enableMicrotasksInReact: 'readonly',
47
// Trusted Types
48
trustedTypes: 'readonly',
49
// RN supports this