[Flare] Refine flow type annotations (#15950)

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

@@ -45,8 +45,10 @@ import {
 import dangerousStyleValue from '../shared/dangerousStyleValue';
 
 import type {DOMContainer} from './ReactDOM';
-import type {ReactEventComponentInstance} from 'shared/ReactTypes';
+import type {
-import type {ReactDOMEventResponder} from 'shared/ReactDOMTypes';
+  ReactDOMEventResponder,
+  ReactDOMEventComponentInstance,
+} from 'shared/ReactDOMTypes';
 import {
   mountEventResponder,
   unmountEventResponder,
@@ -102,7 +104,6 @@ export type UpdatePayload = Array<mixed>;
 export type ChildSet = void; // Unused
 export type TimeoutHandle = TimeoutID;
 export type NoTimeout = -1;
-export type EventResponder = ReactDOMEventResponder;
 
 import {
   enableSuspenseServerRenderer,
@@ -900,7 +901,7 @@ export function didNotFindHydratableSuspenseInstance(
 }
 
 export function mountEventComponent(
-  eventComponentInstance: ReactEventComponentInstance,
+  eventComponentInstance: ReactDOMEventComponentInstance,
 ): void {
   if (enableEventAPI) {
     const rootContainerInstance = ((eventComponentInstance.rootInstance: any): Container);
@@ -926,13 +927,13 @@ export function mountEventComponent(
 }
 
 export function updateEventComponent(
-  eventComponentInstance: ReactEventComponentInstance,
+  eventComponentInstance: ReactDOMEventComponentInstance,
 ): void {
   // NO-OP, why might use this in the future
 }
 
 export function unmountEventComponent(
-  eventComponentInstance: ReactEventComponentInstance,
+  eventComponentInstance: ReactDOMEventComponentInstance,
 ): void {
   if (enableEventAPI) {
     // TODO stop listening to targetEventTypes

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

@@ -18,12 +18,10 @@ import {
   HostComponent,
   FunctionComponent,
 } from 'shared/ReactWorkTags';
-import type {
+import type {EventPriority} from 'shared/ReactTypes';
-  ReactEventComponentInstance,
-  EventPriority,
-} from 'shared/ReactTypes';
 import type {
   ReactDOMEventResponder,
+  ReactDOMEventComponentInstance,
   ReactDOMEventResponderEventType,
   ReactDOMResponderContext,
   ReactDOMResponderEvent,
@@ -86,7 +84,7 @@ type ResponderTimeout = {|
 |};
 
 type ResponderTimer = {|
-  instance: ReactEventComponentInstance,
+  instance: ReactDOMEventComponentInstance,
   func: () => void,
   id: number,
   timeStamp: number,
@@ -95,13 +93,13 @@ type ResponderTimer = {|
 const activeTimeouts: Map<number, ResponderTimeout> = new Map();
 const rootEventTypesToEventComponentInstances: Map<
   DOMTopLevelEventType | string,
-  Set<ReactEventComponentInstance>,
+  Set<ReactDOMEventComponentInstance>,
 > = new Map();
 const targetEventTypeCached: Map<
   Array<ReactDOMEventResponderEventType>,
   Set<string>,
 > = new Map();
-const ownershipChangeListeners: Set<ReactEventComponentInstance> = new Set();
+const ownershipChangeListeners: Set<ReactDOMEventComponentInstance> = new Set();
 const PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;
 const eventListeners:
   | WeakMap
@@ -115,7 +113,7 @@ let continueLocalPropagation = false;
 
 let currentTimeStamp = 0;
 let currentTimers = new Map();
-let currentInstance: null | ReactEventComponentInstance = null;
+let currentInstance: null | ReactDOMEventComponentInstance = null;
 let currentEventQueue: null | EventQueue = null;
 let currentTimerIDCounter = 0;
 let currentDocument: null | Document = null;
@@ -215,7 +213,7 @@ const eventResponderContext: ReactDOMResponderContext = {
     validateResponderContext();
     if (target != null) {
       let fiber = getClosestInstanceFromNode(target);
-      const currentFiber = ((currentInstance: any): ReactEventComponentInstance)
+      const currentFiber = ((currentInstance: any): ReactDOMEventComponentInstance)
         .currentFiber;
 
       while (fiber !== null) {
@@ -233,12 +231,12 @@ const eventResponderContext: ReactDOMResponderContext = {
   },
   isTargetWithinEventResponderScope(target: Element | Document): boolean {
     validateResponderContext();
-    const componentInstance = ((currentInstance: any): ReactEventComponentInstance);
+    const componentInstance = ((currentInstance: any): ReactDOMEventComponentInstance);
     const responder = componentInstance.responder;
 
     if (target != null) {
       let fiber = getClosestInstanceFromNode(target);
-      const currentFiber = ((currentInstance: any): ReactEventComponentInstance)
+      const currentFiber = ((currentInstance: any): ReactDOMEventComponentInstance)
         .currentFiber;
       while (fiber !== null) {
         if (fiber.tag === EventComponent) {
@@ -284,7 +282,7 @@ const eventResponderContext: ReactDOMResponderContext = {
     listenToResponderEventTypesImpl(rootEventTypes, activeDocument);
     for (let i = 0; i < rootEventTypes.length; i++) {
       const rootEventType = rootEventTypes[i];
-      const eventComponentInstance = ((currentInstance: any): ReactEventComponentInstance);
+      const eventComponentInstance = ((currentInstance: any): ReactDOMEventComponentInstance);
       registerRootEventType(rootEventType, eventComponentInstance);
     }
   },
@@ -315,14 +313,14 @@ const eventResponderContext: ReactDOMResponderContext = {
       let rootEventComponents = rootEventTypesToEventComponentInstances.get(
         listeningName,
       );
-      let rootEventTypesSet = ((currentInstance: any): ReactEventComponentInstance)
+      let rootEventTypesSet = ((currentInstance: any): ReactDOMEventComponentInstance)
         .rootEventTypes;
       if (rootEventTypesSet !== null) {
         rootEventTypesSet.delete(listeningName);
       }
       if (rootEventComponents !== undefined) {
         rootEventComponents.delete(
-          ((currentInstance: any): ReactEventComponentInstance),
+          ((currentInstance: any): ReactDOMEventComponentInstance),
         );
       }
     }
@@ -343,7 +341,7 @@ const eventResponderContext: ReactDOMResponderContext = {
   releaseOwnership(): boolean {
     validateResponderContext();
     return releaseOwnershipForEventComponentInstance(
-      ((currentInstance: any): ReactEventComponentInstance),
+      ((currentInstance: any): ReactDOMEventComponentInstance),
     );
   },
   setTimeout(func: () => void, delay): number {
@@ -366,7 +364,7 @@ const eventResponderContext: ReactDOMResponderContext = {
       currentTimers.set(delay, timeout);
     }
     timeout.timers.set(timerId, {
-      instance: ((currentInstance: any): ReactEventComponentInstance),
+      instance: ((currentInstance: any): ReactDOMEventComponentInstance),
       func,
       id: timerId,
       timeStamp: currentTimeStamp,
@@ -389,7 +387,7 @@ const eventResponderContext: ReactDOMResponderContext = {
   getFocusableElementsInScope(): Array<HTMLElement> {
     validateResponderContext();
     const focusableElements = [];
-    const eventComponentInstance = ((currentInstance: any): ReactEventComponentInstance);
+    const eventComponentInstance = ((currentInstance: any): ReactDOMEventComponentInstance);
     const child = ((eventComponentInstance.currentFiber: any): Fiber).child;
 
     if (child !== null) {
@@ -404,7 +402,7 @@ const eventResponderContext: ReactDOMResponderContext = {
     const target = event.target;
     let fiber = getClosestInstanceFromNode(target);
     let hostComponent = target;
-    const currentResponder = ((currentInstance: any): ReactEventComponentInstance)
+    const currentResponder = ((currentInstance: any): ReactDOMEventComponentInstance)
       .responder;
 
     while (fiber !== null) {
@@ -433,7 +431,7 @@ const eventResponderContext: ReactDOMResponderContext = {
   ): boolean {
     validateResponderContext();
     let fiber = getClosestInstanceFromNode(target);
-    const currentResponder = ((currentInstance: any): ReactEventComponentInstance)
+    const currentResponder = ((currentInstance: any): ReactDOMEventComponentInstance)
       .responder;
 
     while (fiber !== null) {
@@ -490,7 +488,7 @@ function getActiveDocument(): Document {
 }
 
 function releaseOwnershipForEventComponentInstance(
-  eventComponentInstance: ReactEventComponentInstance,
+  eventComponentInstance: ReactDOMEventComponentInstance,
 ): boolean {
   if (globalOwner === eventComponentInstance) {
     globalOwner = null;
@@ -679,8 +677,8 @@ function getDOMTargetEventTypesSet(
 
 function storeTargetEventResponderInstance(
   listeningName: string,
-  eventComponentInstance: ReactEventComponentInstance,
+  eventComponentInstance: ReactDOMEventComponentInstance,
-  eventResponderInstances: Array<ReactEventComponentInstance>,
+  eventResponderInstances: Array<ReactDOMEventComponentInstance>,
   eventComponentResponders: null | Set<ReactDOMEventResponder>,
 ): void {
   const responder = eventComponentInstance.responder;
@@ -700,7 +698,7 @@ function storeTargetEventResponderInstance(
 function getTargetEventResponderInstances(
   listeningName: string,
   targetFiber: null | Fiber,
-): Array<ReactEventComponentInstance> {
+): Array<ReactDOMEventComponentInstance> {
   // We use this to know if we should check add hooks. If there are
   // no event targets, then we don't add the hook forms.
   const eventComponentResponders = new Set();
@@ -743,7 +741,7 @@ function getTargetEventResponderInstances(
 
 function getRootEventResponderInstances(
   listeningName: string,
-): Array<ReactEventComponentInstance> {
+): Array<ReactDOMEventComponentInstance> {
   const eventResponderInstances = [];
   const rootEventInstances = rootEventTypesToEventComponentInstances.get(
     listeningName,
@@ -760,7 +758,7 @@ function getRootEventResponderInstances(
 }
 
 function shouldSkipEventComponent(
-  eventResponderInstance: ReactEventComponentInstance,
+  eventResponderInstance: ReactDOMEventComponentInstance,
   responder: ReactDOMEventResponder,
   propagatedEventResponders: null | Set<ReactDOMEventResponder>,
   localPropagation: boolean,
@@ -841,7 +839,7 @@ function traverseAndHandleEventResponderInstances(
         if (
           shouldSkipEventComponent(
             targetEventResponderInstance,
-            responder,
+            ((responder: any): ReactDOMEventResponder),
             propagatedEventResponders,
             localPropagation,
           )
@@ -874,7 +872,7 @@ function traverseAndHandleEventResponderInstances(
         if (
           shouldSkipEventComponent(
             targetEventResponderInstance,
-            responder,
+            ((responder: any): ReactDOMEventResponder),
             propagatedEventResponders,
             localPropagation,
           )
@@ -933,7 +931,8 @@ function triggerOwnershipListeners(): void {
       const instance = listeningInstances[i];
       const {props, responder, state} = instance;
       currentInstance = instance;
-      const onOwnershipChange = responder.onOwnershipChange;
+      const onOwnershipChange = ((responder: any): ReactDOMEventResponder)
+        .onOwnershipChange;
       if (onOwnershipChange !== undefined) {
         onOwnershipChange(eventResponderContext, props, state);
       }
@@ -944,9 +943,9 @@ function triggerOwnershipListeners(): void {
 }
 
 export function mountEventResponder(
-  eventComponentInstance: ReactEventComponentInstance,
+  eventComponentInstance: ReactDOMEventComponentInstance,
 ) {
-  const responder = eventComponentInstance.responder;
+  const responder = ((eventComponentInstance.responder: any): ReactDOMEventResponder);
   if (responder.onOwnershipChange !== undefined) {
     ownershipChangeListeners.add(eventComponentInstance);
   }
@@ -966,9 +965,9 @@ export function mountEventResponder(
 }
 
 export function unmountEventResponder(
-  eventComponentInstance: ReactEventComponentInstance,
+  eventComponentInstance: ReactDOMEventComponentInstance,
 ): void {
-  const responder = eventComponentInstance.responder;
+  const responder = ((eventComponentInstance.responder: any): ReactDOMEventResponder);
   const onUnmount = responder.onUnmount;
   if (onUnmount !== undefined) {
     let {props, state} = eventComponentInstance;
@@ -1054,7 +1053,7 @@ export function dispatchEventForResponderEventSystem(
 }
 
 export function addRootEventTypesForComponentInstance(
-  eventComponentInstance: ReactEventComponentInstance,
+  eventComponentInstance: ReactDOMEventComponentInstance,
   rootEventTypes: Array<ReactDOMEventResponderEventType>,
 ): void {
   for (let i = 0; i < rootEventTypes.length; i++) {
@@ -1065,7 +1064,7 @@ export function addRootEventTypesForComponentInstance(
 
 function registerRootEventType(
   rootEventType: ReactDOMEventResponderEventType,
-  eventComponentInstance: ReactEventComponentInstance,
+  eventComponentInstance: ReactDOMEventComponentInstance,
 ): void {
   let name = rootEventType;
   let passive = true;

packages/react-events/src/Drag.js

@@ -8,6 +8,7 @@
  */
 
 import type {
+  ReactDOMEventResponder,
   ReactDOMResponderEvent,
   ReactDOMResponderContext,
 } from 'shared/ReactDOMTypes';
@@ -84,7 +85,7 @@ function dispatchDragEvent(
   context.dispatchEvent(syntheticEvent, listener, eventPriority);
 }
 
-const DragResponder = {
+const DragResponder: ReactDOMEventResponder = {
   displayName: 'Drag',
   targetEventTypes,
   createInitialState(): DragState {

packages/react-events/src/Focus.js

@@ -8,6 +8,7 @@
  */
 
 import type {
+  ReactDOMEventResponder,
   ReactDOMResponderEvent,
   ReactDOMResponderContext,
   PointerType,
@@ -216,7 +217,7 @@ function handleRootPointerEvent(
 
 let isGlobalFocusVisible = true;
 
-const FocusResponder = {
+const FocusResponder: ReactDOMEventResponder = {
   displayName: 'Focus',
   targetEventTypes,
   rootEventTypes,

packages/react-events/src/FocusScope.js

@@ -7,6 +7,7 @@
  * @flow
  */
 import type {
+  ReactDOMEventResponder,
   ReactDOMResponderEvent,
   ReactDOMResponderContext,
 } from 'shared/ReactDOMTypes';
@@ -45,7 +46,7 @@ function getFirstFocusableElement(
   }
 }
 
-const FocusScopeResponder = {
+const FocusScopeResponder: ReactDOMEventResponder = {
   displayName: 'FocusScope',
   targetEventTypes,
   rootEventTypes,

packages/react-events/src/Hover.js

@@ -8,6 +8,7 @@
  */
 
 import type {
+  ReactDOMEventResponder,
   ReactDOMResponderEvent,
   ReactDOMResponderContext,
 } from 'shared/ReactDOMTypes';
@@ -273,7 +274,7 @@ function isEmulatedMouseEvent(event, state) {
   );
 }
 
-const HoverResponder = {
+const HoverResponder: ReactDOMEventResponder = {
   displayName: 'Hover',
   targetEventTypes,
   createInitialState() {

packages/react-events/src/Press.js

@@ -8,6 +8,7 @@
  */
 
 import type {
+  ReactDOMEventResponder,
   ReactDOMResponderEvent,
   ReactDOMResponderContext,
   PointerType,
@@ -622,7 +623,7 @@ function updateIsPressWithinResponderRegion(
   state.isPressWithinResponderRegion = isPressWithinResponderRegion;
 }
 
-const PressResponder = {
+const PressResponder: ReactDOMEventResponder = {
   displayName: 'Press',
   targetEventTypes,
   createInitialState(): PressState {

packages/react-events/src/Scroll.js

@@ -8,6 +8,7 @@
  */
 
 import type {
+  ReactDOMEventResponder,
   ReactDOMResponderEvent,
   ReactDOMResponderContext,
   PointerType,
@@ -116,7 +117,7 @@ function dispatchEvent(
   context.dispatchEvent(syntheticEvent, listener, eventPriority);
 }
 
-const ScrollResponder = {
+const ScrollResponder: ReactDOMEventResponder = {
   displayName: 'Scroll',
   targetEventTypes,
   createInitialState() {

packages/react-events/src/Swipe.js

@@ -8,6 +8,7 @@
  */
 
 import type {
+  ReactDOMEventResponder,
   ReactDOMResponderEvent,
   ReactDOMResponderContext,
 } from 'shared/ReactDOMTypes';
@@ -88,7 +89,7 @@ type SwipeState = {
   y: number,
 };
 
-const SwipeResponder = {
+const SwipeResponder: ReactDOMEventResponder = {
   displayName: 'Scroll',
   targetEventTypes,
   createInitialState(): SwipeState {

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

@@ -436,19 +436,19 @@ export function replaceContainerChildren(
 ): void {}
 
 export function mountEventComponent(
-  eventComponentInstance: ReactEventComponentInstance,
+  eventComponentInstance: ReactEventComponentInstance<any, any, any>,
 ) {
   throw new Error('Not yet implemented.');
 }
 
 export function updateEventComponent(
-  eventComponentInstance: ReactEventComponentInstance,
+  eventComponentInstance: ReactEventComponentInstance<any, any, any>,
 ) {
   throw new Error('Not yet implemented.');
 }
 
 export function unmountEventComponent(
-  eventComponentInstance: ReactEventComponentInstance,
+  eventComponentInstance: ReactEventComponentInstance<any, any, any>,
 ): void {
   throw new Error('Not yet implemented.');
 }

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

@@ -497,19 +497,19 @@ export function unhideTextInstance(
 }
 
 export function mountEventComponent(
-  eventComponentInstance: ReactEventComponentInstance,
+  eventComponentInstance: ReactEventComponentInstance<any, any, any>,
 ) {
   throw new Error('Not yet implemented.');
 }
 
 export function updateEventComponent(
-  eventComponentInstance: ReactEventComponentInstance,
+  eventComponentInstance: ReactEventComponentInstance<any, any, any>,
 ) {
   throw new Error('Not yet implemented.');
 }
 
 export function unmountEventComponent(
-  eventComponentInstance: ReactEventComponentInstance,
+  eventComponentInstance: ReactEventComponentInstance<any, any, any>,
 ): void {
   throw new Error('Not yet implemented.');
 }

packages/react-reconciler/src/ReactFiber.js

@@ -106,7 +106,7 @@ if (__DEV__) {
 export type Dependencies = {
   expirationTime: ExpirationTime,
   firstContext: ContextDependency<mixed> | null,
-  events: Array<ReactEventComponentInstance> | null,
+  events: Array<ReactEventComponentInstance<any, any, any>> | null,
 };
 
 // A Fiber is work on a Component that needs to be done or was done. There can
@@ -682,7 +682,7 @@ export function createFiberFromFragment(
 }
 
 export function createFiberFromEventComponent(
-  eventComponent: ReactEventComponent,
+  eventComponent: ReactEventComponent<any>,
   pendingProps: any,
   mode: TypeOfMode,
   expirationTime: ExpirationTime,

packages/react-reconciler/src/ReactFiberCompleteWork.js

@@ -1013,7 +1013,11 @@ function completeWork(
         popHostContext(workInProgress);
         const rootContainerInstance = getRootHostContainer();
         const responder = workInProgress.type.responder;
-        let eventComponentInstance: ReactEventComponentInstance | null =
+        let eventComponentInstance: ReactEventComponentInstance<
+          any,
+          any,
+          any,
+        > | null =
           workInProgress.stateNode;
 
         if (eventComponentInstance === null) {
@@ -1036,7 +1040,7 @@ function completeWork(
             newProps,
             responder,
             rootContainerInstance,
-            responderState,
+            responderState || {},
             true,
           );
           markUpdate(workInProgress);

packages/react-reconciler/src/ReactFiberEvents.js

@@ -8,8 +8,10 @@
  */
 
 import type {Fiber, Dependencies} from './ReactFiber';
-import type {ReactEventComponentInstance} from 'shared/ReactTypes';
+import type {
-import type {EventResponder} from 'react-reconciler/src/ReactFiberHostConfig';
+  ReactEventResponder,
+  ReactEventComponentInstance,
+} from 'shared/ReactTypes';
 
 import {
   HostComponent,
@@ -29,9 +31,9 @@ export function prepareToReadEventComponents(workInProgress: Fiber): void {
   currentEventComponentInstanceIndex = 0;
 }
 
-export function updateEventComponentInstance(
+export function updateEventComponentInstance<T, E, C>(
-  responder: EventResponder,
+  responder: ReactEventResponder<T, E, C>,
-  props: null | Object,
+  props: Object,
 ): void {
   invariant(
     responder.allowEventHooks,
@@ -64,7 +66,7 @@ export function updateEventComponentInstance(
       props,
       responder,
       null,
-      responderState,
+      responderState || {},
       false,
     );
     events.push(eventComponentInstance);
@@ -77,14 +79,14 @@ export function updateEventComponentInstance(
   }
 }
 
-export function createEventComponentInstance(
+export function createEventComponentInstance<T, E, C>(
   currentFiber: Fiber,
-  props: null | Object,
+  props: Object,
-  responder: EventResponder,
+  responder: ReactEventResponder<T, E, C>,
   rootInstance: mixed,
-  state: null | Object,
+  state: Object,
   localPropagation: boolean,
-): ReactEventComponentInstance {
+): ReactEventComponentInstance<T, E, C> {
   return {
     currentFiber,
     localPropagation,

packages/react-reconciler/src/ReactFiberHooks.js

@@ -7,13 +7,12 @@
  * @flow
  */
 
-import type {ReactContext} from 'shared/ReactTypes';
+import type {ReactEventResponder, ReactContext} from 'shared/ReactTypes';
 import type {SideEffectTag} from 'shared/ReactSideEffectTags';
 import type {Fiber} from './ReactFiber';
 import type {ExpirationTime} from './ReactFiberExpirationTime';
 import type {HookEffectTag} from './ReactHookEffectTags';
 import type {SuspenseConfig} from './ReactFiberSuspenseConfig';
-import type {EventResponder} from 'react-reconciler/src/ReactFiberHostConfig';
 
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 
@@ -83,7 +82,10 @@ export type Dispatcher = {
     deps: Array<mixed> | void | null,
   ): void,
   useDebugValue<T>(value: T, formatterFn: ?(value: T) => mixed): void,
-  useEvent(responder: EventResponder, props: null | Object): void,
+  useEvent<T, E, C>(
+    responder: ReactEventResponder<T, E, C>,
+    props: Object,
+  ): void,
 };
 
 type Update<S, A> = {
@@ -1397,7 +1399,7 @@ if (__DEV__) {
       mountHookTypesDev();
       return mountDebugValue(value, formatterFn);
     },
-    useEvent(responder, props) {
+    useEvent<T, E, C>(responder: ReactEventResponder<T, E, C>, props) {
       currentHookNameInDev = 'useEvent';
       mountHookTypesDev();
       updateEventComponentInstance(responder, props);
@@ -1499,7 +1501,7 @@ if (__DEV__) {
       updateHookTypesDev();
       return mountDebugValue(value, formatterFn);
     },
-    useEvent(responder, props) {
+    useEvent<T, E, C>(responder: ReactEventResponder<T, E, C>, props) {
       currentHookNameInDev = 'useEvent';
       updateHookTypesDev();
       updateEventComponentInstance(responder, props);
@@ -1601,7 +1603,7 @@ if (__DEV__) {
       updateHookTypesDev();
       return updateDebugValue(value, formatterFn);
     },
-    useEvent(responder, props) {
+    useEvent<T, E, C>(responder: ReactEventResponder<T, E, C>, props) {
       currentHookNameInDev = 'useEvent';
       updateHookTypesDev();
       updateEventComponentInstance(responder, props);
@@ -1714,7 +1716,7 @@ if (__DEV__) {
       mountHookTypesDev();
       return mountDebugValue(value, formatterFn);
     },
-    useEvent(responder, props) {
+    useEvent<T, E, C>(responder: ReactEventResponder<T, E, C>, props) {
       currentHookNameInDev = 'useEvent';
       warnInvalidHookAccess();
       mountHookTypesDev();
@@ -1828,7 +1830,7 @@ if (__DEV__) {
       updateHookTypesDev();
       return updateDebugValue(value, formatterFn);
     },
-    useEvent(responder, props) {
+    useEvent<T, E, C>(responder: ReactEventResponder<T, E, C>, props) {
       currentHookNameInDev = 'useEvent';
       warnInvalidHookAccess();
       updateHookTypesDev();

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

@@ -329,19 +329,19 @@ export function unhideTextInstance(
 }
 
 export function mountEventComponent(
-  eventComponentInstance: ReactEventComponentInstance,
+  eventComponentInstance: ReactEventComponentInstance<any, any, any>,
 ): void {
   // noop
 }
 
 export function updateEventComponent(
-  eventComponentInstance: ReactEventComponentInstance,
+  eventComponentInstance: ReactEventComponentInstance<any, any, any>,
 ): void {
   // noop
 }
 
 export function unmountEventComponent(
-  eventComponentInstance: ReactEventComponentInstance,
+  eventComponentInstance: ReactEventComponentInstance<any, any, any>,
 ): void {
   // noop
 }

packages/react/src/ReactHooks.js

@@ -7,8 +7,7 @@
  * @flow
  */
 
-import type {ReactContext} from 'shared/ReactTypes';
+import type {ReactEventResponder, ReactContext} from 'shared/ReactTypes';
-import type {EventResponder} from 'react-reconciler/src/ReactFiberHostConfig';
 import invariant from 'shared/invariant';
 import warning from 'shared/warning';
 
@@ -137,7 +136,12 @@ export function useDebugValue(value: any, formatterFn: ?(value: any) => any) {
   }
 }
 
-export function useEvent(responder: EventResponder, props: null | Object) {
+export const emptyObject = {};
+
+export function useEvent<T, E, C>(
+  responder: ReactEventResponder<T, E, C>,
+  props: null | Object,
+) {
   const dispatcher = resolveDispatcher();
-  return dispatcher.useEvent(responder, props);
+  return dispatcher.useEvent(responder, props || emptyObject);
 }

packages/shared/ReactDOMTypes.js

@@ -7,7 +7,11 @@
  * @flow
  */
 
-import type {EventPriority} from 'shared/ReactTypes';
+import type {
+  ReactEventResponder,
+  ReactEventComponentInstance,
+  EventPriority,
+} from 'shared/ReactTypes';
 
 type AnyNativeEvent = Event | KeyboardEvent | MouseEvent | Touch;
 
@@ -33,47 +37,17 @@ export type ReactDOMResponderEvent = {
   type: string,
 };
 
-export type ReactDOMEventResponder = {
+export type ReactDOMEventResponder = ReactEventResponder<
-  displayName: string,
+  ReactDOMEventResponderEventType,
-  targetEventTypes?: Array<ReactDOMEventResponderEventType>,
+  ReactDOMResponderEvent,
-  rootEventTypes?: Array<ReactDOMEventResponderEventType>,
+  ReactDOMResponderContext,
-  createInitialState?: (props: null | Object) => Object,
+>;
-  allowMultipleHostChildren: boolean,
+
-  allowEventHooks: boolean,
+export type ReactDOMEventComponentInstance = ReactEventComponentInstance<
-  onEvent?: (
+  ReactDOMEventResponderEventType,
-    event: ReactDOMResponderEvent,
+  ReactDOMResponderEvent,
-    context: ReactDOMResponderContext,
+  ReactDOMResponderContext,
-    props: null | Object,
+>;
-    state: null | Object,
-  ) => void,
-  onEventCapture?: (
-    event: ReactDOMResponderEvent,
-    context: ReactDOMResponderContext,
-    props: null | Object,
-    state: null | Object,
-  ) => void,
-  onRootEvent?: (
-    event: ReactDOMResponderEvent,
-    context: ReactDOMResponderContext,
-    props: null | Object,
-    state: null | Object,
-  ) => void,
-  onMount?: (
-    context: ReactDOMResponderContext,
-    props: null | Object,
-    state: null | Object,
-  ) => void,
-  onUnmount?: (
-    context: ReactDOMResponderContext,
-    props: null | Object,
-    state: null | Object,
-  ) => void,
-  onOwnershipChange?: (
-    context: ReactDOMResponderContext,
-    props: null | Object,
-    state: null | Object,
-  ) => void,
-};
 
 export type ReactDOMResponderContext = {
   dispatchEvent: (

packages/shared/ReactTypes.js

@@ -7,9 +7,6 @@
  * @flow
  */
 
-// NOTE: this line is changed in the RN build, see: copyRNShims in packaging.js
-import type {EventResponder} from 'react-reconciler/src/ReactFiberHostConfig';
-
 export type ReactNode =
   | React$Element<any>
   | ReactPortal
@@ -17,7 +14,7 @@ export type ReactNode =
   | ReactFragment
   | ReactProvider<any>
   | ReactConsumer<any>
-  | ReactEventComponent
+  | ReactEventComponent<any, any, any>
   | ReactEventTarget;
 
 export type ReactEmpty = null | void | boolean;
@@ -84,20 +81,34 @@ export type RefObject = {|
   current: any,
 |};
 
-export type ReactEventComponentInstance = {|
+export type ReactEventComponentInstance<T, E, C> = {|
   currentFiber: mixed,
   localPropagation: boolean,
-  props: null | Object,
+  props: Object,
-  responder: EventResponder,
+  responder: ReactEventResponder<T, E, C>,
   rootEventTypes: null | Set<string>,
   rootInstance: null | mixed,
-  state: null | Object,
+  state: Object,
 |};
 
-export type ReactEventComponent = {|
+export type ReactEventResponder<T, E, C> = {
+  displayName: string,
+  targetEventTypes?: Array<T>,
+  rootEventTypes?: Array<T>,
+  createInitialState?: (props: Object) => Object,
+  allowMultipleHostChildren: boolean,
+  allowEventHooks: boolean,
+  onEvent?: (event: E, context: C, props: Object, state: Object) => void,
+  onEventCapture?: (event: E, context: C, props: Object, state: Object) => void,
+  onRootEvent?: (event: E, context: C, props: Object, state: Object) => void,
+  onMount?: (context: C, props: Object, state: Object) => void,
+  onUnmount?: (context: C, props: Object, state: Object) => void,
+  onOwnershipChange?: (context: C, props: Object, state: Object) => void,
+};
+
+export type ReactEventComponent<T, E, C> = {|
   $$typeof: Symbol | number,
-  props: null | Object,
+  responder: ReactEventResponder<T, E, C>,
-  responder: EventResponder,
 |};
 
 export type ReactEventTarget = {|

packages/shared/createEventComponent.js

@@ -6,8 +6,7 @@
  * @flow
  */
 
-import type {EventResponder} from 'react-reconciler/src/ReactFiberHostConfig';
+import type {ReactEventResponder, ReactEventComponent} from 'shared/ReactTypes';
-import type {ReactEventComponent} from 'shared/ReactTypes';
 import {REACT_EVENT_COMPONENT_TYPE} from 'shared/ReactSymbols';
 
 let hasBadMapPolyfill;
@@ -29,9 +28,9 @@ if (__DEV__) {
   }
 }
 
-export default function createEventComponent(
+export default function createEventComponent<T, E, C>(
-  responder: EventResponder,
+  responder: ReactEventResponder<T, E, C>,
-): ReactEventComponent {
+): ReactEventComponent<T, E, C> {
   // We use responder as a Map key later on. When we have a bad
   // polyfill, then we can't use it as a key as the polyfill tries
   // to add a property to the object.
@@ -40,7 +39,6 @@ export default function createEventComponent(
   }
   const eventComponent = {
     $$typeof: REACT_EVENT_COMPONENT_TYPE,
-    props: null,
     responder: responder,
   };
   if (__DEV__) {

packages/shared/getComponentName.js

@@ -27,7 +27,7 @@ import {
   REACT_EVENT_TARGET_TOUCH_HIT,
 } from 'shared/ReactSymbols';
 import {refineResolvedLazyComponent} from 'shared/ReactLazyComponent';
-import type {ReactEventComponent, ReactEventTarget} from 'shared/ReactTypes';
+import type {ReactEventTarget} from 'shared/ReactTypes';
 
 import {enableEventAPI} from './ReactFeatureFlags';
 
@@ -97,8 +97,7 @@ function getComponentName(type: mixed): string | null {
       }
       case REACT_EVENT_COMPONENT_TYPE: {
         if (enableEventAPI) {
-          const eventComponent = ((type: any): ReactEventComponent);
+          return (type: any).responder.displayName;
-          return eventComponent.responder.displayName;
         }
         break;
       }

scripts/rollup/packaging.js

@@ -1,12 +1,6 @@
 'use strict';
 
-const {
+const {existsSync, readdirSync, unlinkSync} = require('fs');
-  existsSync,
-  readdirSync,
-  unlinkSync,
-  readFileSync,
-  writeFileSync,
-} = require('fs');
 const Bundles = require('./bundles');
 const {
   asyncCopyTo,
@@ -103,12 +97,6 @@ async function copyRNShims() {
       'build/react-native/shims/ReactNativeTypes.js'
     ),
   ]);
-  // Modify the EventResponder type in ReactTypes
-  const reactTypesSource = readFileSync(reactTypesBuildTarget, 'utf8');
-  const original = `import type {EventResponder} from 'react-reconciler/src/ReactFiberHostConfig';`;
-  const changeTo = `import type {ReactNativeEventResponder as EventResponder} from './ReactNativeTypes';`;
-  const modifiedSource = reactTypesSource.replace(original, changeTo);
-  writeFileSync(reactTypesBuildTarget, modifiedSource);
 }
 
 async function copyAllShims() {