ReactDOM.useEvent: Add more scaffolding for useEvent hook (#18271)

packages/react-debug-tools/src/ReactDebugHooks.js

@@ -39,6 +39,11 @@ type HookLogEntry = {
  ...
 };
 
+type ReactDebugListenerMap = {|
+ clear: () => void,
+ setListener: (instance: EventTarget, callback: ?(Event) => void) => void,
+|};
+
 let hookLog: Array<HookLogEntry> = [];
 
 // Primitives
@@ -256,6 +261,16 @@ function useTransition(
  return [callback => {}, false];
 }
 
+const noOp = () => {};
+
+function useEvent(event: any): ReactDebugListenerMap {
+ hookLog.push({primitive: 'Event', stackError: new Error(), value: event});
+ return {
+ clear: noOp,
+ setListener: noOp,
+ };
+}
+
 function useDeferredValue<T>(value: T, config: TimeoutConfig | null | void): T {
  // useDeferredValue() composes multiple hooks internally.
  // Advance the current hook index the same number of times
@@ -285,6 +300,7 @@ const Dispatcher: DispatcherType = {
  useResponder,
  useTransition,
  useDeferredValue,
+ useEvent,
 };
 
 // Inspect

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

@@ -51,6 +51,9 @@ import type {
  ReactDOMEventResponder,
  ReactDOMEventResponderInstance,
  ReactDOMFundamentalComponentInstance,
+ ReactDOMListener,
+ ReactDOMListenerEvent,
+ ReactDOMListenerMap,
 } from 'shared/ReactDOMTypes';
 import {
  mountEventResponder,
@@ -70,6 +73,10 @@ import {
  IS_PASSIVE,
 } from 'legacy-events/EventSystemFlags';
 
+export type ReactListenerEvent = ReactDOMListenerEvent;
+export type ReactListenerMap = ReactDOMListenerMap;
+export type ReactListener = ReactDOMListener;
+
 export type Type = string;
 export type Props = {
  autoFocus?: boolean,

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

@@ -13,6 +13,7 @@ import type {EventSystemFlags} from 'legacy-events/EventSystemFlags';
 import type {Fiber} from 'react-reconciler/src/ReactFiber';
 import type {PluginModule} from 'legacy-events/PluginModuleType';
 import type {ReactSyntheticEvent} from 'legacy-events/ReactSyntheticEventType';
+import type {ReactDOMListener} from 'shared/ReactDOMTypes';
 
 import {registrationNameDependencies} from 'legacy-events/EventPluginRegistry';
 import {batchedEventUpdates} from 'legacy-events/ReactGenericBatching';
@@ -296,3 +297,11 @@ export function dispatchEventForPluginEventSystem(
  ),
  );
 }
+
+export function attachElementListener(listener: ReactDOMListener): void {
+ // TODO
+}
+
+export function detachElementListener(listener: ReactDOMListener): void {
+ // TODO
+}

packages/react-dom/src/events/__tests__/DOMModernPluginEventSystem-test.internal.js

@@ -1039,4 +1039,40 @@ describe('DOMModernPluginEventSystem', () => {
  expect(log).toEqual([]);
  expect(onDivClick).toHaveBeenCalledTimes(0);
  });
+
+ describe('ReactDOM.useEvent', () => {
+ beforeEach(() => {
+ jest.resetModules();
+ ReactFeatureFlags = require('shared/ReactFeatureFlags');
+ ReactFeatureFlags.enableModernEventSystem = true;
+ ReactFeatureFlags.enableUseEventAPI = true;
+
+ React = require('react');
+ ReactDOM = require('react-dom');
+ Scheduler = require('scheduler');
+ ReactDOMServer = require('react-dom/server');
+ });
+
+ if (!__EXPERIMENTAL__) {
+ it("empty test so Jest doesn't complain", () => {});
+ return;
+ }
+
+ it('should create the same event listener map', () => {
+ let listenerMaps = [];
+
+ function Test() {
+ const listenerMap = ReactDOM.unstable_useEvent('click');
+
+ listenerMaps.push(listenerMap);
+
+ return <div />;
+ }
+
+ ReactDOM.render(<Test />, container);
+ ReactDOM.render(<Test />, container);
+ expect(listenerMaps.length).toEqual(2);
+ expect(listenerMaps[0]).toEqual(listenerMaps[1]);
+ });
+ });
 });

packages/react-dom/src/server/ReactPartialRendererHooks.js

@@ -17,6 +17,8 @@ import type {
  ReactEventResponderListener,
 } from 'shared/ReactTypes';
 import type {SuspenseConfig} from 'react-reconciler/src/ReactFiberSuspenseConfig';
+import type {ReactDOMListenerMap} from 'shared/ReactDOMTypes';
+
 import {validateContextBounds} from './ReactPartialRendererContext';
 
 import invariant from 'shared/invariant';
@@ -474,6 +476,13 @@ function useTransition(
  return [startTransition, false];
 }
 
+function useEvent(event: any): ReactDOMListenerMap {
+ return {
+ clear: noop,
+ setListener: noop,
+ };
+}
+
 function noop(): void {}
 
 export let currentThreadID: ThreadID = 0;
@@ -500,4 +509,5 @@ export const Dispatcher: DispatcherType = {
  useResponder,
  useDeferredValue,
  useTransition,
+ useEvent,
 };

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

@@ -76,6 +76,10 @@ export type UpdatePayload = Object;
 export type TimeoutHandle = TimeoutID;
 export type NoTimeout = -1;
 
+export type ReactListenerEvent = Object;
+export type ReactListenerMap = Object;
+export type ReactListener = Object;
+
 // TODO: Remove this conditional once all changes have propagated.
 if (registerEventHandler) {
  /**

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

@@ -26,6 +26,10 @@ import ReactNativeFiberHostComponent from './ReactNativeFiberHostComponent';
 
 const {get: getViewConfigForType} = ReactNativeViewConfigRegistry;
 
+export type ReactListenerEvent = Object;
+export type ReactListenerMap = Object;
+export type ReactListener = Object;
+
 export type Type = string;
 export type Props = Object;
 export type Container = number;