Experiment: Infer the current event priority from the native event (#20748)

* Add the feature flag

* Add a host config method

* Wire it up to the work loop

* Export constants for third-party renderers

* Document for third-party renderers

Author: gaearon

packages/react-art/src/ReactARTHostConfig.js

@@ -7,10 +7,18 @@
 
 import Transform from 'art/core/transform';
 import Mode from 'art/modes/current';
+import {enableNewReconciler} from 'shared/ReactFeatureFlags';
 import invariant from 'shared/invariant';
 
 import {TYPES, EVENT_TYPES, childrenAsString} from './ReactARTInternals';
 
+import {DefaultLanePriority as DefaultLanePriority_old} from 'react-reconciler/src/ReactFiberLane.old';
+import {DefaultLanePriority as DefaultLanePriority_new} from 'react-reconciler/src/ReactFiberLane.new';
+
+const DefaultLanePriority = enableNewReconciler
+  ? DefaultLanePriority_new
+  : DefaultLanePriority_old;
+
 const pooledTransform = new Transform();
 
 const NO_CONTEXT = {};
@@ -340,6 +348,10 @@ export function shouldSetTextContent(type, props) {
   );
 }
 
+export function getCurrentEventPriority() {
+  return DefaultLanePriority;
+}
+
 // The ART renderer is secondary to the React DOM renderer.
 export const isPrimaryRenderer = false;
 

packages/react-dom/src/client/ReactDOMHostConfig.js

@@ -47,6 +47,7 @@ import {validateDOMNesting, updatedAncestorInfo} from './validateDOMNesting';
 import {
   isEnabled as ReactBrowserEventEmitterIsEnabled,
   setEnabled as ReactBrowserEventEmitterSetEnabled,
+  getEventPriority,
 } from '../events/ReactDOMEventListener';
 import {getChildNamespace} from '../shared/DOMNamespaces';
 import {
@@ -65,10 +66,18 @@ import {
   enableSuspenseServerRenderer,
   enableCreateEventHandleAPI,
   enableScopeAPI,
+  enableNewReconciler,
 } from 'shared/ReactFeatureFlags';
 import {HostComponent, HostText} from 'react-reconciler/src/ReactWorkTags';
 import {listenToAllSupportedEvents} from '../events/DOMPluginEventSystem';
 
+import {DefaultLanePriority as DefaultLanePriority_old} from 'react-reconciler/src/ReactFiberLane.old';
+import {DefaultLanePriority as DefaultLanePriority_new} from 'react-reconciler/src/ReactFiberLane.new';
+
+const DefaultLanePriority = enableNewReconciler
+  ? DefaultLanePriority_new
+  : DefaultLanePriority_old;
+
 export type Type = string;
 export type Props = {
   autoFocus?: boolean,
@@ -372,6 +381,14 @@ export function createTextInstance(
   return textNode;
 }
 
+export function getCurrentEventPriority(): * {
+  const currentEvent = window.event;
+  if (currentEvent === undefined) {
+    return DefaultLanePriority;
+  }
+  return getEventPriority(currentEvent.type);
+}
+
 export const isPrimaryRenderer = true;
 export const warnsIfNotActing = true;
 // This initialization code may run even on server environments

packages/react-dom/src/events/ReactDOMEventListener.js

@@ -348,7 +348,7 @@ export function attemptToDispatchEvent(
   return null;
 }
 
-function getEventPriority(domEventName: DOMEventName) {
+export function getEventPriority(domEventName: DOMEventName): * {
   switch (domEventName) {
     // Used by SimpleEventPlugin:
     case 'cancel':

packages/react-native-renderer/src/ReactFabricHostConfig.js

@@ -21,10 +21,18 @@ import type {
 import {mountSafeCallback_NOT_REALLY_SAFE} from './NativeMethodsMixinUtils';
 import {create, diff} from './ReactNativeAttributePayload';
 
+import {enableNewReconciler} from 'shared/ReactFeatureFlags';
 import invariant from 'shared/invariant';
 
 import {dispatchEvent} from './ReactFabricEventEmitter';
 
+import {DefaultLanePriority as DefaultLanePriority_old} from 'react-reconciler/src/ReactFiberLane.old';
+import {DefaultLanePriority as DefaultLanePriority_new} from 'react-reconciler/src/ReactFiberLane.new';
+
+const DefaultLanePriority = enableNewReconciler
+  ? DefaultLanePriority_new
+  : DefaultLanePriority_old;
+
 // Modules provided by RN:
 import {
   ReactNativeViewConfigRegistry,
@@ -339,6 +347,10 @@ export function shouldSetTextContent(type: string, props: Props): boolean {
   return false;
 }
 
+export function getCurrentEventPriority(): * {
+  return DefaultLanePriority;
+}
+
 // The Fabric renderer is secondary to the existing React Native renderer.
 export const isPrimaryRenderer = false;
 

packages/react-native-renderer/src/ReactNativeHostConfig.js

@@ -10,6 +10,7 @@
 import type {TouchedViewDataAtPoint} from './ReactNativeTypes';
 
 import invariant from 'shared/invariant';
+import {enableNewReconciler} from 'shared/ReactFeatureFlags';
 
 // Modules provided by RN:
 import {
@@ -26,6 +27,13 @@ import {
 } from './ReactNativeComponentTree';
 import ReactNativeFiberHostComponent from './ReactNativeFiberHostComponent';
 
+import {DefaultLanePriority as DefaultLanePriority_old} from 'react-reconciler/src/ReactFiberLane.old';
+import {DefaultLanePriority as DefaultLanePriority_new} from 'react-reconciler/src/ReactFiberLane.new';
+
+const DefaultLanePriority = enableNewReconciler
+  ? DefaultLanePriority_new
+  : DefaultLanePriority_old;
+
 const {get: getViewConfigForType} = ReactNativeViewConfigRegistry;
 
 export type Type = string;
@@ -261,6 +269,10 @@ export function shouldSetTextContent(type: string, props: Props): boolean {
   return false;
 }
 
+export function getCurrentEventPriority(): * {
+  return DefaultLanePriority;
+}
+
 // -------------------
 //     Mutation
 // -------------------

packages/react-noop-renderer/src/createReactNoop.js

@@ -391,6 +391,10 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
 
     resetAfterCommit(): void {},
 
+    getCurrentEventPriority() {
+      return NoopRenderer.DefaultEventPriority;
+    },
+
     now: Scheduler.unstable_now,
 
     isPrimaryRenderer: true,

packages/react-reconciler/README.md

@@ -211,6 +211,32 @@ You can proxy this to `queueMicrotask` or its equivalent in your environment.
 
 This is a property (not a function) that should be set to `true` if your renderer is the main one on the page. For example, if you're writing a renderer for the Terminal, it makes sense to set it to `true`, but if your renderer is used *on top of* React DOM or some other existing renderer, set it to `false`.
 
+#### `getCurrentEventPriority`
+
+To implement this method, you'll need some constants available on the _returned_ `Renderer` object:
+
+```js
+const HostConfig = {
+  // ...
+  getCurrentEventPriority() {
+    return MyRenderer.DefaultEventPriority;
+  },
+  // ...
+}
+
+const MyRenderer = Reconciler(HostConfig);
+```
+
+The constant you return depends on which event, if any, is being handled right now. (In the browser, you can check this using `window.event && window.event.type`).
+
+* **Discrete events:** If the active event is _directly caused by the user_ (such as mouse and keyboard events) and _each event in a sequence is intentional_ (e.g. `click`), return `MyRenderer.DiscreteEventPriority`. This tells React that they should interrupt any background work and cannot be batched across time.
+
+* **Continuous events:** If the active event is _directly caused by the user_ but _the user can't distinguish between individual events in a sequence_ (e.g. `mouseover`), return `MyRenderer.ContinuousEventPriority`. This tells React they should interrupt any background work but can be batched across time.
+
+* **Other events / No active event:** In all other cases, return `MyRenderer.DefaultEventPriority`. This tells React that this event is considered background work, and interactive events will be prioritized over it.
+
+You can consult the `getCurrentEventPriority()` implementation in `ReactDOMHostConfig.js` for a reference implementation.
+
 ### Mutation Methods
 
 If you're using React in mutation mode (you probably do), you'll need to implement a few more methods.

packages/react-reconciler/src/ReactFiberReconciler.js

@@ -52,6 +52,9 @@ import {
   registerMutableSourceForHydration as registerMutableSourceForHydration_old,
   runWithPriority as runWithPriority_old,
   getCurrentUpdateLanePriority as getCurrentUpdateLanePriority_old,
+  DefaultEventPriority as DefaultEventPriority_old,
+  DiscreteEventPriority as DiscreteEventPriority_old,
+  ContinuousEventPriority as ContinuousEventPriority_old,
 } from './ReactFiberReconciler.old';
 
 import {
@@ -92,6 +95,9 @@ import {
   registerMutableSourceForHydration as registerMutableSourceForHydration_new,
   runWithPriority as runWithPriority_new,
   getCurrentUpdateLanePriority as getCurrentUpdateLanePriority_new,
+  DefaultEventPriority as DefaultEventPriority_new,
+  DiscreteEventPriority as DiscreteEventPriority_new,
+  ContinuousEventPriority as ContinuousEventPriority_new,
 } from './ReactFiberReconciler.new';
 
 export const createContainer = enableNewReconciler
@@ -168,6 +174,15 @@ export const createPortal = enableNewReconciler
 export const createComponentSelector = enableNewReconciler
   ? createComponentSelector_new
   : createComponentSelector_old;
+export const DefaultEventPriority = enableNewReconciler
+  ? DefaultEventPriority_new
+  : DefaultEventPriority_old;
+export const DiscreteEventPriority = enableNewReconciler
+  ? DiscreteEventPriority_new
+  : DiscreteEventPriority_old;
+export const ContinuousEventPriority = enableNewReconciler
+  ? ContinuousEventPriority_new
+  : ContinuousEventPriority_old;
 
 //TODO: "psuedo" is spelled "pseudo"
 export const createHasPsuedoClassSelector = enableNewReconciler

packages/react-reconciler/src/ReactFiberReconciler.new.js

@@ -94,6 +94,15 @@ import {
 } from './ReactFiberHotReloading.new';
 import {markRenderScheduled} from './SchedulingProfiler';
 
+// Ideally host configs would import these constants from the reconciler
+// entry point, but we can't do this because of a circular dependency.
+// They are used by third-party renderers so they need to stay up to date.
+export {
+  InputDiscreteLanePriority as DiscreteEventPriority,
+  InputContinuousLanePriority as ContinuousEventPriority,
+  DefaultLanePriority as DefaultEventPriority,
+} from './ReactFiberLane.new';
+
 export {registerMutableSourceForHydration} from './ReactMutableSource.new';
 export {createPortal} from './ReactPortal';
 export {

packages/react-reconciler/src/ReactFiberReconciler.old.js

@@ -94,6 +94,15 @@ import {
 } from './ReactFiberHotReloading.old';
 import {markRenderScheduled} from './SchedulingProfiler';
 
+// Ideally host configs would import these constants from the reconciler
+// entry point, but we can't do this because of a circular dependency.
+// They are used by third-party renderers so they need to stay up to date.
+export {
+  InputDiscreteLanePriority as DiscreteEventPriority,
+  InputContinuousLanePriority as ContinuousEventPriority,
+  DefaultLanePriority as DefaultEventPriority,
+} from './ReactFiberLane.old';
+
 export {registerMutableSourceForHydration} from './ReactMutableSource.new';
 export {createPortal} from './ReactPortal';
 export {

packages/react-reconciler/src/ReactFiberWorkLoop.new.js

@@ -35,6 +35,7 @@ import {
   enableDoubleInvokingEffects,
   skipUnmountedBoundaries,
   enableTransitionEntanglement,
+  enableNativeEventPriorityInference,
 } from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import invariant from 'shared/invariant';
@@ -94,6 +95,7 @@ import {
   afterActiveInstanceBlur,
   clearContainer,
   scheduleMicrotask,
+  getCurrentEventPriority,
 } from './ReactFiberHostConfig';
 
 import {
@@ -461,11 +463,23 @@ export function requestUpdateLane(fiber: Fiber): Lane {
     const currentLanePriority = getCurrentUpdateLanePriority();
     lane = findUpdateLane(currentLanePriority, currentEventWipLanes);
   } else {
-    const schedulerLanePriority = schedulerPriorityToLanePriority(
-      schedulerPriority,
-    );
-
-    lane = findUpdateLane(schedulerLanePriority, currentEventWipLanes);
+    if (enableNativeEventPriorityInference) {
+      const eventLanePriority = getCurrentEventPriority();
+      if (eventLanePriority === DefaultLanePriority) {
+        // TODO: move this case into the ReactDOM host config.
+        const schedulerLanePriority = schedulerPriorityToLanePriority(
+          schedulerPriority,
+        );
+        lane = findUpdateLane(schedulerLanePriority, currentEventWipLanes);
+      } else {
+        lane = findUpdateLane(eventLanePriority, currentEventWipLanes);
+      }
+    } else {
+      const schedulerLanePriority = schedulerPriorityToLanePriority(
+        schedulerPriority,
+      );
+      lane = findUpdateLane(schedulerLanePriority, currentEventWipLanes);
+    }
   }
 
   return lane;

packages/react-reconciler/src/ReactFiberWorkLoop.old.js

@@ -35,6 +35,7 @@ import {
   enableDoubleInvokingEffects,
   skipUnmountedBoundaries,
   enableTransitionEntanglement,
+  enableNativeEventPriorityInference,
 } from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import invariant from 'shared/invariant';
@@ -94,6 +95,7 @@ import {
   afterActiveInstanceBlur,
   clearContainer,
   scheduleMicrotask,
+  getCurrentEventPriority,
 } from './ReactFiberHostConfig';
 
 import {
@@ -461,11 +463,23 @@ export function requestUpdateLane(fiber: Fiber): Lane {
     const currentLanePriority = getCurrentUpdateLanePriority();
     lane = findUpdateLane(currentLanePriority, currentEventWipLanes);
   } else {
-    const schedulerLanePriority = schedulerPriorityToLanePriority(
-      schedulerPriority,
-    );
-
-    lane = findUpdateLane(schedulerLanePriority, currentEventWipLanes);
+    if (enableNativeEventPriorityInference) {
+      const eventLanePriority = getCurrentEventPriority();
+      if (eventLanePriority === DefaultLanePriority) {
+        // TODO: move this case into the ReactDOM host config.
+        const schedulerLanePriority = schedulerPriorityToLanePriority(
+          schedulerPriority,
+        );
+        lane = findUpdateLane(schedulerLanePriority, currentEventWipLanes);
+      } else {
+        lane = findUpdateLane(eventLanePriority, currentEventWipLanes);
+      }
+    } else {
+      const schedulerLanePriority = schedulerPriorityToLanePriority(
+        schedulerPriority,
+      );
+      lane = findUpdateLane(schedulerLanePriority, currentEventWipLanes);
+    }
   }
 
   return lane;

packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js

@@ -73,6 +73,7 @@ export const afterActiveInstanceBlur = $$$hostConfig.afterActiveInstanceBlur;
 export const preparePortalMount = $$$hostConfig.preparePortalMount;
 export const prepareScopeUpdate = $$$hostConfig.preparePortalMount;
 export const getInstanceFromScope = $$$hostConfig.getInstanceFromScope;
+export const getCurrentEventPriority = $$$hostConfig.getCurrentEventPriority;
 
 // -------------------
 //      Test selectors

packages/react-test-renderer/src/ReactTestHostConfig.js

@@ -8,6 +8,14 @@
  */
 
 import {REACT_OPAQUE_ID_TYPE} from 'shared/ReactSymbols';
+import {enableNewReconciler} from 'shared/ReactFeatureFlags';
+
+import {DefaultLanePriority as DefaultLanePriority_old} from 'react-reconciler/src/ReactFiberLane.old';
+import {DefaultLanePriority as DefaultLanePriority_new} from 'react-reconciler/src/ReactFiberLane.new';
+
+const DefaultLanePriority = enableNewReconciler
+  ? DefaultLanePriority_new
+  : DefaultLanePriority_old;
 
 export type Type = string;
 export type Props = Object;
@@ -213,6 +221,10 @@ export function createTextInstance(
   };
 }
 
+export function getCurrentEventPriority(): * {
+  return DefaultLanePriority;
+}
+
 export const isPrimaryRenderer = false;
 export const warnsIfNotActing = true;
 

packages/shared/ReactFeatureFlags.js

@@ -151,3 +151,5 @@ export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableTransitionEntanglement = false;
 
 export const enableDiscreteEventMicroTasks = false;
+
+export const enableNativeEventPriorityInference = false;

packages/shared/forks/ReactFeatureFlags.native-fb.js

@@ -59,6 +59,7 @@ export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableTransitionEntanglement = false;
 export const enableDiscreteEventMicroTasks = false;
+export const enableNativeEventPriorityInference = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars