Optimize EventTarget-based event dispatch pipeline (#56738)

rubennorte · meta-codesync[bot] · commit 37909420f3d5 · 2026-05-11T05:22:27.000-07:00
Summary: Pull Request resolved: #56738 Reduces dispatch latency on the new W3C `EventTarget`-based event pipeline (gated behind `enableNativeEventTargetEventDispatching`) by eliminating redundant work that compounds per ancestor on every dispatch. Four surgical changes, all backwards-compatible with the existing public API surface (`EventTarget` / `Event` / `LegacySyntheticEvent` / `dispatchNativeEvent` shapes are unchanged; the protected `EVENT_TARGET_GET_DECLARATIVE_LISTENER_KEY` contract evolves additively): 1. **Fast path in `EventTarget.invoke()`** when only a prop-listener is present and there are no `addEventListener` listeners — call the prop listener inline without allocating an array or running `for..of`. The mixed-listeners slow path moved to a small `invokeListeners()` helper. 2. **Pre-resolve React prop names once per dispatch** in `dispatchNativeEvent`. The view-config we already look up exposes the bubbled / captured prop names directly; stash them on the event via internal symbol slots (`BUBBLED_PROP_NAME_KEY` / `CAPTURED_PROP_NAME_KEY`) so per-ancestor `EVENT_TARGET_GET_DECLARATIVE_LISTENER_KEY` lookups can read them in O(1) instead of doing a `getEventTypePropName(eventType, isCapture)` hash lookup each time. `ReactNativeElement` reads them with a fallback to the mapping table for events not constructed via `dispatchNativeEvent`. The protected method now receives `(event, isCapture)` instead of `(eventType, isCapture)` — `event.type` is `eventType`, and `isCapture` can't be derived from `event.eventPhase` (which is `AT_TARGET` during both passes through the target node per the W3C "event dispatch" algorithm). 3. **Alias `[EVENT_TARGET_GET_THE_PARENT_KEY]` to the `parentNode` getter** on `ReadOnlyNode.prototype` (instead of a trampoline method that just returns `this.parentNode`). Removes one extra function call per ancestor on the dispatch hot path. 4. **Early-return `processResponderEvent`** for non-touch events (`pointerup`, `pointermove`, `layout`, etc.) when no responder is currently set. Trivially safe; saves the touch counting + `ResponderTouchHistoryStore` + `canTriggerTransfer` work that always short-circuits anyway in that case. Also adds one new scenario to `EventTarget-benchmark-itest.js` (`'dispatchEvent, bubbling (100), prop listener per target only'`) that isolates the per-target prop-listener cost in pure JS — useful for future micro-validation of `invoke()` changes. ### Benchmark results (`EventDispatching-benchmark-itest.js`, opt mode, FLAG ON, median ns/op) | Scenario | Before | After | Speedup | |------------------------------------------------|--------|--------|--------| | dispatch event, flat (1 handler) | 44,226 | 41,653 | 5.8 % | | dispatch event, nested 10 deep (bubbling) | 112,489 | 100,050 | 11.1 % | | dispatch event, nested 50 deep (bubbling) | 405,799 | 359,259 | 11.5 % | | dispatch event, nested 10 (no handlers) | 105,378 | 98,067 | 6.9 % | | dispatch event with stopPropagation, nested 10 | 91,868 | 86,831 | 5.5 % | | render + dispatch, flat | 83,766 | 80,781 | 3.6 % | Improvements scale with tree depth as the per-ancestor savings compound. The legacy plugin path (FLAG OFF) is unchanged within run-to-run noise on every scenario. The remaining gap to the legacy path at depth 50 (~2.74×) is dominated by the per-ancestor `NativeDOM.getParentNode` TurboModule call (~5.4 % of total profile inclusive). Closing that requires a non-surgical change (e.g., a bulk native parent-walk API) that is out of scope here. Changelog: [Internal] Reviewed By: javache Differential Revision: D104414586 fbshipit-source-id: 88513ca40fc3b303931548aac3187ca32f4be9ca
diff --git a/packages/react-native/src/private/renderer/events/ReactNativeResponder.js b/packages/react-native/src/private/renderer/events/ReactNativeResponder.js
@@ -550,6 +550,24 @@ to return true:wantsResponderID|                            |
                                |                            |
                                +                            + */
 
+/**
+ * Returns whether a top-level event is one that the responder system needs to
+ * observe. Used as a fast-path in `processResponderEvent`: most events
+ * (`pointerup`, `pointermove`, `layout`, etc.) are not responder-relevant and
+ * — when no responder is currently set — produce no work.
+ */
+function isResponderRelevantTopLevelType(topLevelType: string): boolean {
+  return match (topLevelType) {
+    | 'topTouchStart'
+    | 'topTouchMove'
+    | 'topTouchEnd'
+    | 'topTouchCancel'
+    | 'topScroll'
+    | 'topSelectionChange' => true,
+    _ => false,
+  };
+}
+
 /**
  * Process a native event through the responder system.
  */
@@ -558,6 +576,15 @@ export function processResponderEvent(
   eventTarget: EventTarget | null,
   nativeEvent: {[string]: unknown},
 ): void {
+  // Fast path: if this event isn't one the responder system cares about and
+  // there is no active responder, exit immediately. This is the dominant case
+  // for non-touch events (pointer*, layout, etc.) on apps without an active
+  // gesture, and saves the touch counting + ResponderTouchHistoryStore +
+  // canTriggerTransfer work.
+  if (responderNode == null && !isResponderRelevantTopLevelType(topLevelType)) {
+    return;
+  }
+
   // Track touch count
   if (isStartish(topLevelType)) {
     trackedTouchCount += 1;
diff --git a/packages/react-native/src/private/renderer/events/dispatchNativeEvent.js b/packages/react-native/src/private/renderer/events/dispatchNativeEvent.js
@@ -14,7 +14,11 @@ import {
   customBubblingEventTypes,
   customDirectEventTypes,
 } from '../../../../Libraries/Renderer/shims/ReactNativeViewConfigRegistry';
-import {setEventInitTimeStamp} from '../../webapis/dom/events/internals/EventInternals';
+import {
+  setBubbledPropName,
+  setCapturedPropName,
+  setEventInitTimeStamp,
+} from '../../webapis/dom/events/internals/EventInternals';
 import {dispatchTrustedEvent} from '../../webapis/dom/events/internals/EventTargetInternals';
 import LegacySyntheticEvent from './LegacySyntheticEvent';
 import {topLevelTypeToEventType} from './ReactNativeEventTypeMapping';
@@ -73,6 +77,26 @@ export default function dispatchNativeEvent(
       payload,
       bubbleConfig ?? directConfig,
     );
+
+    // Pre-resolve the React prop names ("onFoo" / "onFooCapture") once per
+    // dispatch and stash them on the event so per-ancestor
+    // `EVENT_TARGET_GET_DECLARATIVE_LISTENER_KEY` lookups can read them
+    // directly, avoiding the per-call `getEventTypePropName` hash lookup.
+    if (bubbleConfig != null) {
+      const phasedRegistrationNames = bubbleConfig.phasedRegistrationNames;
+      setBubbledPropName(
+        syntheticEvent,
+        phasedRegistrationNames.bubbled ?? null,
+      );
+      setCapturedPropName(
+        syntheticEvent,
+        phasedRegistrationNames.captured ?? null,
+      );
+    } else if (directConfig != null) {
+      setBubbledPropName(syntheticEvent, directConfig.registrationName ?? null);
+      setCapturedPropName(syntheticEvent, null);
+    }
+
     dispatchTrustedEvent(target, syntheticEvent);
   }
 
diff --git a/packages/react-native/src/private/webapis/dom/events/EventTarget.js b/packages/react-native/src/private/webapis/dom/events/EventTarget.js
@@ -217,10 +217,14 @@ export default class EventTarget {
    *
    * Called during event dispatch before explicitly registered listeners.
    * Return a callback to be invoked as an event listener, or null.
+   *
+   * `event.type` is the event type. `isCapture` distinguishes the capture pass
+   * from the bubble pass — it cannot be derived from `event.eventPhase`,
+   * which is `AT_TARGET` during both passes through the target node.
    */
   // $FlowExpectedError[unsupported-syntax]
   [EVENT_TARGET_GET_DECLARATIVE_LISTENER_KEY](
-    eventType: string,
+    event: Event,
     isCapture: boolean,
   ): EventCallback | null {
     return null;
@@ -354,27 +358,39 @@ function invoke(
 
   setCurrentTarget(event, eventTarget);
 
-  // Build the list of listeners to invoke:
-  // When the flag is enabled, prop-based listeners fire first, then
-  // explicitly registered addEventListener listeners.
-  // When disabled, only addEventListener listeners are used (legacy path).
-  let listeners: Array<EventListenerRegistration>;
-
   if (ReactNativeFeatureFlags.enableNativeEventTargetEventDispatching()) {
+    // Resolve the prop-based listener. Pass the event so subclasses can read
+    // its `type` and any pre-resolved internal slots; pass `isCapture`
+    // separately because it can't be derived from `event.eventPhase` (which
+    // is `AT_TARGET` during both passes through the target node).
     // $FlowExpectedError[prop-missing]
     const propListener: EventCallback | null = eventTarget[
       EVENT_TARGET_GET_DECLARATIVE_LISTENER_KEY
-    ](event.type, isCapture);
+    ](event, isCapture);
 
     const listenersByType = getListenersForPhase(eventTarget, isCapture);
     const maybeListeners = listenersByType?.get(event.type);
 
-    if (propListener == null && maybeListeners == null) {
+    // Fast path: only a prop listener (no `addEventListener` listeners).
+    // This is the overwhelmingly common case for React-driven dispatch.
+    if (maybeListeners == null) {
+      if (propListener == null) {
+        return;
+      }
+      const currentEvent = global.event;
+      global.event = event;
+      try {
+        propListener.call(eventTarget, event);
+      } catch (error) {
+        // TODO: replace with `reportError` when it's available.
+        console.error(error);
+      }
+      global.event = currentEvent;
       return;
     }
 
-    listeners = [];
-
+    // Slow path: combine prop listener + addEventListener listeners.
+    const listeners: Array<EventListenerRegistration> = [];
     if (propListener != null) {
       listeners.push({
         callback: propListener,
@@ -383,21 +399,33 @@ function invoke(
         removed: false,
       });
     }
-
-    if (maybeListeners != null) {
-      for (const registration of maybeListeners.values()) {
-        listeners.push(registration);
-      }
+    for (const registration of maybeListeners.values()) {
+      listeners.push(registration);
     }
-  } else {
-    const listenersByType = getListenersForPhase(eventTarget, isCapture);
-    const maybeListeners = listenersByType?.get(event.type);
-    if (maybeListeners == null) {
-      return;
-    }
-    listeners = Array.from(maybeListeners.values());
+    invokeListeners(eventTarget, event, listeners, isCapture);
+    return;
+  }
+
+  // Legacy path (flag OFF): only `addEventListener` listeners.
+  const listenersByType = getListenersForPhase(eventTarget, isCapture);
+  const maybeListeners = listenersByType?.get(event.type);
+  if (maybeListeners == null) {
+    return;
   }
+  invokeListeners(
+    eventTarget,
+    event,
+    Array.from(maybeListeners.values()),
+    isCapture,
+  );
+}
 
+function invokeListeners(
+  eventTarget: EventTarget,
+  event: Event,
+  listeners: Array<EventListenerRegistration>,
+  isCapture: boolean,
+): void {
   for (const listener of listeners) {
     if (listener.removed) {
       continue;
diff --git a/packages/react-native/src/private/webapis/dom/events/__tests__/EventTarget-benchmark-itest.js b/packages/react-native/src/private/webapis/dom/events/__tests__/EventTarget-benchmark-itest.js
@@ -15,11 +15,29 @@ import createEventTargetHierarchyWithDepth from './createEventTargetHierarchyWit
 import {unstable_benchmark} from '@react-native/fantom';
 import Event from 'react-native/src/private/webapis/dom/events/Event';
 import EventTarget from 'react-native/src/private/webapis/dom/events/EventTarget';
+import {EVENT_TARGET_GET_DECLARATIVE_LISTENER_KEY} from 'react-native/src/private/webapis/dom/events/internals/EventTargetInternals';
 
 let event: Event;
 let eventTarget: EventTarget;
 let eventTargets: ReadonlyArray<EventTarget>;
 
+// Simulates the prop-listener pattern from `ReactNativeElement` without
+// requiring React or any `parentNode` TurboModule traversal: each target
+// returns a no-op callback from `EVENT_TARGET_GET_DECLARATIVE_LISTENER_KEY`.
+// Used to isolate the per-target cost of `invoke()` when only declarative
+// (prop) listeners are present, which is the common path on real components.
+function createPropListenerOnlyHierarchy(
+  depth: number,
+): ReadonlyArray<EventTarget> {
+  const targets = createEventTargetHierarchyWithDepth(depth);
+  const noop = () => {};
+  for (const target of targets) {
+    // $FlowExpectedError[prop-missing] $FlowExpectedError[invalid-computed-prop]
+    target[EVENT_TARGET_GET_DECLARATIVE_LISTENER_KEY] = () => noop;
+  }
+  return targets;
+}
+
 unstable_benchmark
   .suite('EventTarget', {
     minIterations: 1000,
@@ -175,4 +193,17 @@ unstable_benchmark
         eventTargets = createEventTargetHierarchyWithDepth(100);
       },
     },
+  )
+  .test(
+    'dispatchEvent, bubbling (100), prop listener per target only',
+    () => {
+      eventTarget.dispatchEvent(event);
+    },
+    {
+      beforeAll: () => {
+        event = new Event('custom', {bubbles: true});
+        const targets = createPropListenerOnlyHierarchy(100);
+        eventTarget = targets[targets.length - 1];
+      },
+    },
   );
diff --git a/packages/react-native/src/private/webapis/dom/events/internals/EventInternals.js b/packages/react-native/src/private/webapis/dom/events/internals/EventInternals.js
@@ -35,6 +35,42 @@ export const TARGET_KEY: symbol = Symbol('target');
 // platform using the original timestamps.
 export const EVENT_INIT_TIMESTAMP_KEY: symbol = Symbol('eventInitTimestamp');
 
+// Internal slots used by the React Native renderer to pass pre-resolved
+// React prop names ("onPointerUp" / "onPointerUpCapture") through the event
+// to subclasses of `EventTarget` (i.e. `ReactNativeElement`). This avoids
+// recomputing `getEventTypePropName(event.type, isCapture)` per ancestor per
+// phase during dispatch, which is hot.
+export const BUBBLED_PROP_NAME_KEY: symbol = Symbol('bubbledPropName');
+export const CAPTURED_PROP_NAME_KEY: symbol = Symbol('capturedPropName');
+
+export function getBubbledPropName(event: Event): string | null | void {
+  // $FlowExpectedError[prop-missing]
+  return event[BUBBLED_PROP_NAME_KEY];
+}
+
+export function setBubbledPropName(
+  event: Event,
+  propName: string | null,
+): void {
+  // $FlowExpectedError[prop-missing]
+  // $FlowExpectedError[invalid-computed-prop]
+  event[BUBBLED_PROP_NAME_KEY] = propName;
+}
+
+export function getCapturedPropName(event: Event): string | null | void {
+  // $FlowExpectedError[prop-missing]
+  return event[CAPTURED_PROP_NAME_KEY];
+}
+
+export function setCapturedPropName(
+  event: Event,
+  propName: string | null,
+): void {
+  // $FlowExpectedError[prop-missing]
+  // $FlowExpectedError[invalid-computed-prop]
+  event[CAPTURED_PROP_NAME_KEY] = propName;
+}
+
 export function getCurrentTarget(event: Event): EventTarget | null {
   // $FlowExpectedError[prop-missing]
   return event[CURRENT_TARGET_KEY];
diff --git a/packages/react-native/src/private/webapis/dom/nodes/ReactNativeElement.js b/packages/react-native/src/private/webapis/dom/nodes/ReactNativeElement.js
@@ -21,6 +21,7 @@ import type {
   MeasureOnSuccessCallback,
   NativeMethods,
 } from '../../../types/HostInstance';
+import type Event from '../events/Event';
 import type {InstanceHandle} from './internals/NodeInternals';
 import type ReactNativeDocument from './ReactNativeDocument';
 
@@ -30,6 +31,10 @@ import {create as createAttributePayload} from '../../../../../Libraries/ReactNa
 import warnForStyleProps from '../../../../../Libraries/ReactNative/ReactFabricPublicInstance/warnForStyleProps';
 import * as ReactNativeFeatureFlags from '../../../featureflags/ReactNativeFeatureFlags';
 import {getEventTypePropName} from '../../../renderer/events/ReactNativeEventTypeMapping';
+import {
+  getBubbledPropName,
+  getCapturedPropName,
+} from '../events/internals/EventInternals';
 import {EVENT_TARGET_GET_DECLARATIVE_LISTENER_KEY} from '../events/internals/EventTargetInternals';
 import {
   getCurrentProps,
@@ -223,16 +228,29 @@ class ReactNativeElement extends ReadOnlyElement implements NativeMethods {
   // This is called by EventTarget.invoke() before explicit addEventListener
   // listeners, allowing prop-based handlers to be resolved at dispatch time
   // without registering them via addEventListener during commit.
+  //
+  // Fast path: when `event` is a `LegacySyntheticEvent` (always the case for
+  // events created by `dispatchNativeEvent`), the React prop names have been
+  // pre-resolved on the event during construction. Reading them directly
+  // avoids the `getEventTypePropName(eventType, isCapture)` hash lookup per
+  // ancestor per phase.
   // $FlowExpectedError[unsupported-syntax]
   [EVENT_TARGET_GET_DECLARATIVE_LISTENER_KEY](
-    eventType: string,
+    event: Event,
     isCapture: boolean,
   ): ((event: Event) => void) | null {
     const currentProps = getCurrentProps(this);
     if (currentProps == null) {
       return null;
     }
-    const propName = getEventTypePropName(eventType, isCapture);
+    let propName = isCapture
+      ? getCapturedPropName(event)
+      : getBubbledPropName(event);
+    if (propName === undefined) {
+      // The event wasn't created via `dispatchNativeEvent` (e.g.,
+      // user-dispatched). Fall back to the mapping table.
+      propName = getEventTypePropName(event.type, isCapture);
+    }
     if (propName == null) {
       return null;
     }
diff --git a/packages/react-native/src/private/webapis/dom/nodes/ReadOnlyNode.js b/packages/react-native/src/private/webapis/dom/nodes/ReadOnlyNode.js
@@ -63,13 +63,6 @@ class ReadOnlyNode extends ReadOnlyNodeBase {
     setInstanceHandle(this, instanceHandle);
   }
 
-  // Implement the "get the parent" algorithm for EventTarget.
-  // This enables event propagation (capture/bubble) through the node tree.
-  // $FlowExpectedError[unsupported-syntax]
-  [EVENT_TARGET_GET_THE_PARENT_KEY](): EventTarget | null {
-    return this.parentNode;
-  }
-
   get childNodes(): NodeList<ReadOnlyNode> {
     const childNodes = getChildNodes(this);
     return createNodeList(childNodes);
@@ -326,6 +319,24 @@ class ReadOnlyNode extends ReadOnlyNodeBase {
 
 setPlatformObject(ReadOnlyNode);
 
+// Implement the "get the parent" algorithm for EventTarget by aliasing
+// `[EVENT_TARGET_GET_THE_PARENT_KEY]` directly to the `parentNode` getter
+// function on the prototype. This enables event propagation (capture/bubble)
+// through the node tree and avoids the extra function call that a
+// trampoline method (e.g. `() { return this.parentNode; }`) would add per
+// ancestor on the hot event-dispatch path.
+{
+  const parentNodeGetter = Object.getOwnPropertyDescriptor(
+    ReadOnlyNode.prototype,
+    'parentNode',
+  )?.get;
+  if (parentNodeGetter != null) {
+    // $FlowExpectedError[prop-missing]
+    // $FlowExpectedError[invalid-computed-prop]
+    ReadOnlyNode.prototype[EVENT_TARGET_GET_THE_PARENT_KEY] = parentNodeGetter;
+  }
+}
+
 type ReadOnlyNodeT = ReadOnlyNode;
 
 function replaceConstructorWithoutSuper(
