[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`](6c28c87c4d/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
This commit is contained in:
Rubén Norte 2024-03-13 10:00:10 +00:00 committed by GitHub
parent d46989150e
commit bb0944fe5b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
13 changed files with 11 additions and 15 deletions

View File

@ -427,6 +427,7 @@ module.exports = {
files: ['packages/react-native-renderer/**/*.js'],
globals: {
nativeFabricUIManager: 'readonly',
RN$enableMicrotasksInReact: 'readonly',
},
},
{

View File

@ -47,10 +47,7 @@ const {
unstable_getCurrentEventPriority: fabricGetCurrentEventPriority,
} = nativeFabricUIManager;
import {
useMicrotasksForSchedulingInFabric,
passChildrenWhenCloningPersistedNodes,
} from 'shared/ReactFeatureFlags';
import {passChildrenWhenCloningPersistedNodes} from 'shared/ReactFeatureFlags';
const {get: getViewConfigForType} = ReactNativeViewConfigRegistry;
@ -507,6 +504,10 @@ export const NotPendingTransition: TransitionStatus = null;
// -------------------
// Microtasks
// -------------------
export const supportsMicrotasks = useMicrotasksForSchedulingInFabric;
export const supportsMicrotasks: boolean =
typeof RN$enableMicrotasksInReact !== 'undefined' &&
!!RN$enableMicrotasksInReact;
export const scheduleMicrotask: any =
typeof queueMicrotask === 'function' ? queueMicrotask : scheduleTimeout;

View File

@ -115,8 +115,6 @@ export const enableFizzExternalRuntime = true;
export const alwaysThrottleRetries = true;
export const useMicrotasksForSchedulingInFabric = false;
export const passChildrenWhenCloningPersistedNodes = false;
export const enableUseDeferredValueInitialArg = __EXPERIMENTAL__;

View File

@ -30,7 +30,6 @@ export const enableRenderableContext = __VARIANT__;
export const enableUnifiedSyncLane = __VARIANT__;
export const enableUseRefAccessWarning = __VARIANT__;
export const passChildrenWhenCloningPersistedNodes = __VARIANT__;
export const useMicrotasksForSchedulingInFabric = __VARIANT__;
export const useModernStrictMode = __VARIANT__;
// Flow magic to verify the exports of this file match the original version.

View File

@ -28,7 +28,6 @@ export const {
enableUnifiedSyncLane,
enableUseRefAccessWarning,
passChildrenWhenCloningPersistedNodes,
useMicrotasksForSchedulingInFabric,
useModernStrictMode,
} = dynamicFlags;

View File

@ -80,7 +80,6 @@ export const enableAsyncActions = false;
export const alwaysThrottleRetries = false;
export const useMicrotasksForSchedulingInFabric = false;
export const passChildrenWhenCloningPersistedNodes = false;
export const enableUseDeferredValueInitialArg = __EXPERIMENTAL__;
export const disableClientCache = true;

View File

@ -78,7 +78,6 @@ export const enableAsyncActions = true;
export const alwaysThrottleRetries = true;
export const useMicrotasksForSchedulingInFabric = false;
export const passChildrenWhenCloningPersistedNodes = false;
export const enableUseDeferredValueInitialArg = __EXPERIMENTAL__;
export const disableClientCache = true;

View File

@ -78,7 +78,6 @@ export const enableAsyncActions = true;
export const alwaysThrottleRetries = true;
export const useMicrotasksForSchedulingInFabric = false;
export const passChildrenWhenCloningPersistedNodes = false;
export const enableUseDeferredValueInitialArg = __EXPERIMENTAL__;
export const disableClientCache = true;

View File

@ -79,7 +79,6 @@ export const enableAsyncActions = true;
export const alwaysThrottleRetries = true;
export const useMicrotasksForSchedulingInFabric = false;
export const passChildrenWhenCloningPersistedNodes = false;
export const enableUseDeferredValueInitialArg = true;
export const disableClientCache = true;

View File

@ -106,7 +106,6 @@ export const enableFizzExternalRuntime = true;
export const forceConcurrentByDefaultForTesting = false;
export const useMicrotasksForSchedulingInFabric = false;
export const passChildrenWhenCloningPersistedNodes = false;
export const enableAsyncDebugInfo = false;

View File

@ -167,6 +167,8 @@ declare module 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface'
declare module 'react-native/Libraries/ReactPrivate/ReactNativePrivateInitializeCore' {
}
declare const RN$enableMicrotasksInReact: boolean;
// This is needed for a short term solution.
// See https://github.com/facebook/react/pull/15490 for more info
declare var nativeFabricUIManager: {

View File

@ -18,6 +18,5 @@ declare module 'ReactNativeInternalFeatureFlags' {
declare export var enableUnifiedSyncLane: boolean;
declare export var enableUseRefAccessWarning: boolean;
declare export var passChildrenWhenCloningPersistedNodes: boolean;
declare export var useMicrotasksForSchedulingInFabric: boolean;
declare export var useModernStrictMode: boolean;
}

View File

@ -42,6 +42,8 @@ module.exports = {
// Fabric. See https://github.com/facebook/react/pull/15490
// for more information
nativeFabricUIManager: 'readonly',
// RN flag to enable microtasks
RN$enableMicrotasksInReact: 'readonly',
// Trusted Types
trustedTypes: 'readonly',
// RN supports this