Skip to content

Commit

Permalink
[RN] Use microtasks in the RN renderer based on a global flag defined…
Browse files Browse the repository at this point in the history
… by RN (facebook#28472)

## Summary

We want to enable the new event loop in React Native
(react-native-community/discussions-and-proposals#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
facebook/react-native#43397 which has been
merged already
  • Loading branch information
rubennorte authored and AndyPengc12 committed Apr 15, 2024
1 parent 117b305 commit 3b81f25
Show file tree
Hide file tree
Showing 13 changed files with 11 additions and 15 deletions.
1 change: 1 addition & 0 deletions .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -427,6 +427,7 @@ module.exports = {
files: ['packages/react-native-renderer/**/*.js'],
globals: {
nativeFabricUIManager: 'readonly',
RN$enableMicrotasksInReact: 'readonly',
},
},
{
Expand Down
11 changes: 6 additions & 5 deletions packages/react-native-renderer/src/ReactFiberConfigFabric.js
Original file line number Diff line number Diff line change
Expand Up @@ -47,10 +47,7 @@ const {
unstable_getCurrentEventPriority: fabricGetCurrentEventPriority,
} = nativeFabricUIManager;

import {
useMicrotasksForSchedulingInFabric,
passChildrenWhenCloningPersistedNodes,
} from 'shared/ReactFeatureFlags';
import {passChildrenWhenCloningPersistedNodes} from 'shared/ReactFeatureFlags';

const {get: getViewConfigForType} = ReactNativeViewConfigRegistry;

Expand Down Expand Up @@ -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;
2 changes: 0 additions & 2 deletions packages/shared/ReactFeatureFlags.js
Original file line number Diff line number Diff line change
Expand Up @@ -115,8 +115,6 @@ export const enableFizzExternalRuntime = true;

export const alwaysThrottleRetries = true;

export const useMicrotasksForSchedulingInFabric = false;

export const passChildrenWhenCloningPersistedNodes = false;

export const enableUseDeferredValueInitialArg = __EXPERIMENTAL__;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
1 change: 0 additions & 1 deletion packages/shared/forks/ReactFeatureFlags.native-fb.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ export const {
enableUnifiedSyncLane,
enableUseRefAccessWarning,
passChildrenWhenCloningPersistedNodes,
useMicrotasksForSchedulingInFabric,
useModernStrictMode,
} = dynamicFlags;

Expand Down
1 change: 0 additions & 1 deletion packages/shared/forks/ReactFeatureFlags.native-oss.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
1 change: 0 additions & 1 deletion packages/shared/forks/ReactFeatureFlags.test-renderer.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
1 change: 0 additions & 1 deletion packages/shared/forks/ReactFeatureFlags.www.js
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,6 @@ export const enableFizzExternalRuntime = true;

export const forceConcurrentByDefaultForTesting = false;

export const useMicrotasksForSchedulingInFabric = false;
export const passChildrenWhenCloningPersistedNodes = false;

export const enableAsyncDebugInfo = false;
Expand Down
2 changes: 2 additions & 0 deletions scripts/flow/react-native-host-hooks.js
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
1 change: 0 additions & 1 deletion scripts/flow/xplat.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
2 changes: 2 additions & 0 deletions scripts/rollup/validate/eslintrc.rn.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit 3b81f25

Please sign in to comment.