@samitouri / QOS-React-2 / commits / 1a74726246

Add `supportsMicrotasks` to the host config (#20809)

* Add `supportsMicrotasks` to the host config Only certain renderers support scheduling a microtask, so we need a renderer specific flag that we can toggle. That way it's off for some renderers and on for others. I copied the approach we use for the other optional parts of the host config, like persistent mode and test selectors. Why isn't the feature flag sufficient? The feature flag modules, confusingly, are not renderer-specific, at least when running the our tests against the source files. They are meant to correspond to a release channel, not a renderer, but we got confused at some point and haven't cleaned it up. For example, when we run `yarn test`, Jest loads the flags from the default `ReactFeatureFlags.js` module, even when we import the React Native renderer — but in the actual builds, we load a different feature flag module, `ReactFeatureFlags.native-oss.js.` There's no way in our current Jest load a different host config for each renderer, because they all just import the same module. We should solve this by creating separate Jest project for each renderer, so that the flags loaded when running against source are the same ones that we use in the compiled bundles. The feature flag (`enableDiscreteMicrotasks`) still exists — it's used to set the React DOM host config's `supportsMicrotasks` flag to `true`. (Same for React Noop) The important part is that turning on the feature flag does *not* affect the other renderers, like React Native. The host config will likely outlive the feature flag, too, since the feature flag only exists so we can gradually roll it out and measure the impact in production; once we do, we'll remove it. Whereas the host config flag may continue to be used to disable the discrete microtask behavior for RN, because RN will likely use a native (non-JavaScript) API to schedule its tasks. * Add `supportsMicrotask` to react-reconciler README

Andrew Clark committed Feb 12, 2021 at 15:13 UTC 1a7472624661270008011fd77f097d71e6249de9
12 files changed +62 -34
packages/react-art/src/ReactARTHostConfig.js
+1 -3
@@ -249,6 +249,7 @@ export * from 'react-reconciler/src/ReactFiberHostConfigWithNoPersistence';
249 export * from 'react-reconciler/src/ReactFiberHostConfigWithNoHydration';
250 export * from 'react-reconciler/src/ReactFiberHostConfigWithNoScopes';
251 export * from 'react-reconciler/src/ReactFiberHostConfigWithNoTestSelectors';
252 +export * from 'react-reconciler/src/ReactFiberHostConfigWithNoMicrotasks';
253
254 export function appendInitialChild(parentInstance, child) {
255 if (typeof child === 'string') {
@@ -338,9 +339,6 @@ export function getChildHostContext() {
339 export const scheduleTimeout = setTimeout;
340 export const cancelTimeout = clearTimeout;
341 export const noTimeout = -1;
341 -export function scheduleMicrotask(callback: Function) {
342 - invariant(false, 'Not implemented.');
343 -}
342
343 export function shouldSetTextContent(type, props) {
344 return (
packages/react-dom/src/client/ReactDOMHostConfig.js
+6
@@ -67,6 +67,7 @@ import {
67 enableCreateEventHandleAPI,
68 enableScopeAPI,
69 enableNewReconciler,
70 + enableDiscreteEventMicroTasks,
71 } from 'shared/ReactFeatureFlags';
72 import {HostComponent, HostText} from 'react-reconciler/src/ReactWorkTags';
73 import {listenToAllSupportedEvents} from '../events/DOMPluginEventSystem';
@@ -399,6 +400,11 @@ export const scheduleTimeout: any =
400 export const cancelTimeout: any =
401 typeof clearTimeout === 'function' ? clearTimeout : (undefined: any);
402 export const noTimeout = -1;
403 +
404 +// -------------------
405 +// Microtasks
406 +// -------------------
407 +export const supportsMicrotasks = enableDiscreteEventMicroTasks;
408 export const scheduleMicrotask: any =
409 typeof queueMicrotask === 'function'
410 ? queueMicrotask
packages/react-native-renderer/src/ReactFabricHostConfig.js
+1 -3
@@ -193,6 +193,7 @@ export * from 'react-reconciler/src/ReactFiberHostConfigWithNoMutation';
193 export * from 'react-reconciler/src/ReactFiberHostConfigWithNoHydration';
194 export * from 'react-reconciler/src/ReactFiberHostConfigWithNoScopes';
195 export * from 'react-reconciler/src/ReactFiberHostConfigWithNoTestSelectors';
196 +export * from 'react-reconciler/src/ReactFiberHostConfigWithNoMicrotasks';
197
198 export function appendInitialChild(
199 parentInstance: Instance,
@@ -360,9 +361,6 @@ export const warnsIfNotActing = false;
361 export const scheduleTimeout = setTimeout;
362 export const cancelTimeout = clearTimeout;
363 export const noTimeout = -1;
363 -export function scheduleMicrotask(callback: Function) {
364 - invariant(false, 'Not implemented.');
365 -}
364
365 // -------------------
366 // Persistence
packages/react-native-renderer/src/ReactNativeHostConfig.js
+1 -3
@@ -97,6 +97,7 @@ export * from 'react-reconciler/src/ReactFiberHostConfigWithNoPersistence';
97 export * from 'react-reconciler/src/ReactFiberHostConfigWithNoHydration';
98 export * from 'react-reconciler/src/ReactFiberHostConfigWithNoScopes';
99 export * from 'react-reconciler/src/ReactFiberHostConfigWithNoTestSelectors';
100 +export * from 'react-reconciler/src/ReactFiberHostConfigWithNoMicrotasks';
101
102 export function appendInitialChild(
103 parentInstance: Instance,
@@ -255,9 +256,6 @@ export const warnsIfNotActing = true;
256 export const scheduleTimeout = setTimeout;
257 export const cancelTimeout = clearTimeout;
258 export const noTimeout = -1;
258 -export function scheduleMicrotask(callback: Function) {
259 - invariant(false, 'Not implemented.');
260 -}
259
260 export function shouldSetTextContent(type: string, props: Props): boolean {
261 // TODO (bvaughn) Revisit this decision.
packages/react-noop-renderer/src/createReactNoop.js
+6 -1
@@ -27,7 +27,10 @@ import {
27 LegacyRoot,
28 } from 'react-reconciler/src/ReactRootTags';
29
30 -import {enableNativeEventPriorityInference} from 'shared/ReactFeatureFlags';
30 +import {
31 + enableNativeEventPriorityInference,
32 + enableDiscreteEventMicroTasks,
33 +} from 'shared/ReactFeatureFlags';
34 import ReactSharedInternals from 'shared/ReactSharedInternals';
35 import enqueueTask from 'shared/enqueueTask';
36 const {IsSomeRendererActing} = ReactSharedInternals;
@@ -372,6 +375,8 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
375 scheduleTimeout: setTimeout,
376 cancelTimeout: clearTimeout,
377 noTimeout: -1,
378 +
379 + supportsMicrotasks: enableDiscreteEventMicroTasks,
380 scheduleMicrotask:
381 typeof queueMicrotask === 'function'
382 ? queueMicrotask
packages/react-reconciler/README.md
+4 -1
@@ -203,9 +203,12 @@ You can proxy this to `clearTimeout` or its equivalent in your environment.
203
204 This is a property (not a function) that should be set to something that can never be a valid timeout ID. For example, you can set it to `-1`.
205
206 +#### `supportsMicrotask`
207 +
208 +Set this to true to indicate that your renderer supports `scheduleMicrotask`. We use microtasks as part of our discrete event implementation in React DOM. If you're not sure if your renderer should support this, you probably should. The option to not implement `scheduleMicrotask` exists so that platforms with more control over user events, like React Native, can choose to use a different mechanism.
209 #### `scheduleMicrotask(fn)`
210
208 -You can proxy this to `queueMicrotask` or its equivalent in your environment.
211 +Optional. You can proxy this to `queueMicrotask` or its equivalent in your environment.
212
213 #### `isPrimaryRenderer`
214
packages/react-reconciler/src/ReactFiberHostConfigWithNoMicrotasks.js new
+26
@@ -0,0 +1,26 @@
1 +/**
2 + * Copyright (c) Facebook, Inc. and its affiliates.
3 + *
4 + * This source code is licensed under the MIT license found in the
5 + * LICENSE file in the root directory of this source tree.
6 + *
7 + * @flow
8 + */
9 +
10 +import invariant from 'shared/invariant';
11 +
12 +// Renderers that don't support microtasks
13 +// can re-export everything from this module.
14 +
15 +function shim(...args: any) {
16 + invariant(
17 + false,
18 + 'The current renderer does not support microtasks. ' +
19 + 'This error is likely caused by a bug in React. ' +
20 + 'Please file an issue.',
21 + );
22 +}
23 +
24 +// Test selectors (when unsupported)
25 +export const supportsMicrotasks = false;
26 +export const scheduleMicrotask = shim;
packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+3 -3
@@ -93,8 +93,9 @@ import {
93 warnsIfNotActing,
94 afterActiveInstanceBlur,
95 clearContainer,
96 - scheduleMicrotask,
96 getCurrentEventPriority,
97 + supportsMicrotasks,
98 + scheduleMicrotask,
99 } from './ReactFiberHostConfig';
100
101 import {
@@ -219,7 +220,6 @@ import {
220 syncNestedUpdateFlag,
221 } from './ReactProfilerTimer.new';
222
222 -import {enableDiscreteEventMicroTasks} from 'shared/ReactFeatureFlags';
223 // DEV stuff
224 import getComponentName from 'shared/getComponentName';
225 import ReactStrictModeWarnings from './ReactStrictModeWarnings.new';
@@ -756,7 +756,7 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
756 performSyncWorkOnRoot.bind(null, root),
757 );
758 } else if (
759 - enableDiscreteEventMicroTasks &&
759 + supportsMicrotasks &&
760 newCallbackPriority === InputDiscreteLanePriority
761 ) {
762 scheduleMicrotask(performSyncWorkOnRoot.bind(null, root));
packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+3 -3
@@ -93,8 +93,9 @@ import {
93 warnsIfNotActing,
94 afterActiveInstanceBlur,
95 clearContainer,
96 - scheduleMicrotask,
96 getCurrentEventPriority,
97 + supportsMicrotasks,
98 + scheduleMicrotask,
99 } from './ReactFiberHostConfig';
100
101 import {
@@ -219,7 +220,6 @@ import {
220 syncNestedUpdateFlag,
221 } from './ReactProfilerTimer.old';
222
222 -import {enableDiscreteEventMicroTasks} from 'shared/ReactFeatureFlags';
223 // DEV stuff
224 import getComponentName from 'shared/getComponentName';
225 import ReactStrictModeWarnings from './ReactStrictModeWarnings.old';
@@ -756,7 +756,7 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
756 performSyncWorkOnRoot.bind(null, root),
757 );
758 } else if (
759 - enableDiscreteEventMicroTasks &&
759 + supportsMicrotasks &&
760 newCallbackPriority === InputDiscreteLanePriority
761 ) {
762 scheduleMicrotask(performSyncWorkOnRoot.bind(null, root));
packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
+7 -1
@@ -54,7 +54,6 @@ export const shouldSetTextContent = $$$hostConfig.shouldSetTextContent;
54 export const createTextInstance = $$$hostConfig.createTextInstance;
55 export const scheduleTimeout = $$$hostConfig.scheduleTimeout;
56 export const cancelTimeout = $$$hostConfig.cancelTimeout;
57 -export const scheduleMicrotask = $$$hostConfig.scheduleMicrotask;
57 export const noTimeout = $$$hostConfig.noTimeout;
58 export const now = $$$hostConfig.now;
59 export const isPrimaryRenderer = $$$hostConfig.isPrimaryRenderer;
@@ -75,6 +74,13 @@ export const prepareScopeUpdate = $$$hostConfig.preparePortalMount;
74 export const getInstanceFromScope = $$$hostConfig.getInstanceFromScope;
75 export const getCurrentEventPriority = $$$hostConfig.getCurrentEventPriority;
76
77 +// -------------------
78 +// Microtasks
79 +// (optional)
80 +// -------------------
81 +export const supportsMicrotasks = $$$hostConfig.supportsMicrotasks;
82 +export const scheduleMicrotask = $$$hostConfig.scheduleMicrotask;
83 +
84 // -------------------
85 // Test selectors
86 // (optional)
packages/react-test-renderer/src/ReactTestHostConfig.js
+2 -15
@@ -58,6 +58,7 @@ export type RendererInspectionConfig = $ReadOnly<{||}>;
58 export * from 'react-reconciler/src/ReactFiberHostConfigWithNoPersistence';
59 export * from 'react-reconciler/src/ReactFiberHostConfigWithNoHydration';
60 export * from 'react-reconciler/src/ReactFiberHostConfigWithNoTestSelectors';
61 +export * from 'react-reconciler/src/ReactFiberHostConfigWithNoMicrotasks';
62
63 const NO_CONTEXT = {};
64 const UPDATE_SIGNAL = {};
@@ -230,21 +231,7 @@ export const warnsIfNotActing = true;
231
232 export const scheduleTimeout = setTimeout;
233 export const cancelTimeout = clearTimeout;
233 -export const scheduleMicrotask =
234 - typeof queueMicrotask === 'function'
235 - ? queueMicrotask
236 - : typeof Promise !== 'undefined'
237 - ? (callback: Function) =>
238 - Promise.resolve(null)
239 - .then(callback)
240 - .catch(handleErrorInNextTick)
241 - : scheduleTimeout; // TODO: Determine the best fallback here.
242 -
243 -function handleErrorInNextTick(error) {
244 - setTimeout(() => {
245 - throw error;
246 - });
247 -}
234 +
235 export const noTimeout = -1;
236
237 // -------------------
scripts/error-codes/codes.json
+2 -1
@@ -373,5 +373,6 @@
373 "382": "This query has received more parameters than the last time the same query was used. Always pass the exact number of parameters that the query needs.",
374 "383": "This query has received fewer parameters than the last time the same query was used. Always pass the exact number of parameters that the query needs.",
375 "384": "Refreshing the cache is not supported in Server Components.",
376 - "385": "A mutable source was mutated while the %s component was rendering. This is not supported. Move any mutations into event handlers or effects."
376 + "385": "A mutable source was mutated while the %s component was rendering. This is not supported. Move any mutations into event handlers or effects.",
377 + "386": "The current renderer does not support microtasks. This error is likely caused by a bug in React. Please file an issue."
378 }