EventTarget-based event dispatching (#56427) by rubennorte · Pull Request #56427 · facebook/react-native

rubennorte · 2026-04-13T17:28:46Z

Summary:

Changelog: [internal]

Context

The current React Native Fabric renderer uses a legacy plugin-based
event system (ResponderEventPlugin, ReactNativeBridgeEventPlugin,
pooled SyntheticEvent objects) that duplicates dispatch logic already
provided by the W3C EventTarget API. This adds complexity, prevents
alignment with the Web platform, and blocks EventTarget-based features.

Changes

Behind the enableNativeEventTargetEventDispatching flag, native events
are dispatched through dispatchTrustedEvent on the public instance
tree instead of the legacy plugin system. Event handler props are
extracted from canonical.currentProps at dispatch time via a
declarative listener hook on EventTarget — no addEventListener
registration at commit time.

The responder system is fully self-contained: it walks the public
instance tree directly for negotiation, calls handlers from props, and
inspects return values inline (e.g. onResponderGrant returning true
blocks native). It has no EventTarget coupling and no commit-time cost.

Reviewed By: javache, jackpope

Differential Revision: D100462547

meta-codesync · 2026-04-13T17:29:00Z

@rubennorte has exported this pull request. If you are a Meta employee, you can view the originating Diff in D100462547.

Summary: Changelog: [internal] ## Context React Native's event system currently dispatches events through a legacy plugin-based system. This change sets up an experiment to migrate to the W3C EventTarget API (addEventListener/removeEventListener/dispatchEvent), which enables imperative event handling on refs and aligns with web standards. The experiment is gated behind the `enableNativeEventTargetEventDispatching` feature flag (defaults to off). ## Changes - Add `EVENT_TARGET_GET_DECLARATIVE_LISTENER_KEY` hook to EventTarget, allowing subclasses to provide prop-based listeners at dispatch time. In `invoke()`, the prop listener is prepended to the addEventListener listeners and processed through the same loop (no duplication). - ReactNativeElement overrides this hook to look up handlers from `canonical.currentProps` using a reverse mapping from event names to prop names (built lazily from the view config in `EventNameToPropName.js`). - Add `getCurrentProps` helper in `NodeInternals.js` to encapsulate private React API access. - Conditionally extend ReadOnlyNode from EventTarget when the flag is enabled, making addEventListener/removeEventListener/dispatchEvent available on element refs. - Export `setEventInitTimeStamp` and `dispatchTrustedEvent` from `ReactNativePrivateInterface` for use by the React renderer. - Set up global `RN$isNativeEventTargetEventDispatchingEnabled` function for the React renderer to check the flag value. Gated until the OSS renderer has been synced to OSS: - Add integration tests for event dispatching (prop handlers, addEventListener, ordering, capture/bubble phases, timestamps) and responder system (grant, release, transfer, negotiation, capture). - Add event dispatching benchmark. Differential Revision: D100462547

Summary: Pull Request resolved: facebook#56427 Changelog: [internal] ## Context React Native's event system currently dispatches events through a legacy plugin-based system. This change sets up an experiment to migrate to the W3C EventTarget API (addEventListener/removeEventListener/dispatchEvent), which enables imperative event handling on refs and aligns with web standards. The experiment is gated behind the `enableNativeEventTargetEventDispatching` feature flag (defaults to off). ## Changes - Add `EVENT_TARGET_GET_DECLARATIVE_LISTENER_KEY` hook to EventTarget, allowing subclasses to provide prop-based listeners at dispatch time. In `invoke()`, the prop listener is prepended to the addEventListener listeners and processed through the same loop (no duplication). - ReactNativeElement overrides this hook to look up handlers from `canonical.currentProps` using a reverse mapping from event names to prop names (built lazily from the view config in `EventNameToPropName.js`). - Add `getCurrentProps` helper in `NodeInternals.js` to encapsulate private React API access. - Conditionally extend ReadOnlyNode from EventTarget when the flag is enabled, making addEventListener/removeEventListener/dispatchEvent available on element refs. - Export `setEventInitTimeStamp` and `dispatchTrustedEvent` from `ReactNativePrivateInterface` for use by the React renderer. - Set up global `RN$isNativeEventTargetEventDispatchingEnabled` function for the React renderer to check the flag value. Gated until the OSS renderer has been synced to OSS: - Add integration tests for event dispatching (prop handlers, addEventListener, ordering, capture/bubble phases, timestamps) and responder system (grant, release, transfer, negotiation, capture). - Add event dispatching benchmark. Differential Revision: D100462547