Flatten EventFunctionPayload

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

@@ -16,7 +16,7 @@ import type {
   UpdatePayload,
 } from './ReactFiberHostConfig';
 import type {Fiber} from './ReactInternalTypes';
-import type {FiberRoot} from './ReactInternalTypes';
+import type {FiberRoot, EventFunctionWrapper} from './ReactInternalTypes';
 import type {Lanes} from './ReactFiberLane.new';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.new';
 import type {UpdateQueue} from './ReactFiberClassUpdateQueue.new';
@@ -667,9 +667,13 @@ function commitUseEventMount(finishedWork: Fiber) {
   const updateQueue: FunctionComponentUpdateQueue | null = (finishedWork.updateQueue: any);
   const eventPayloads = updateQueue !== null ? updateQueue.events : null;
   if (eventPayloads !== null) {
-    for (let ii = 0; ii < eventPayloads.length; ii++) {
-      const eventPayload = eventPayloads[ii];
-      eventPayload.event._impl = eventPayload.nextImpl;
+    // FunctionComponentUpdateQueue.events is a flat array of
+    // [EventFunctionWrapper, EventFunction, ...], so increment by 2 each iteration to find the next
+    // pair.
+    for (let ii = 0; ii < eventPayloads.length; ii += 2) {
+      const event: EventFunctionWrapper<any, any, any> = eventPayloads[ii];
+      const nextImpl = eventPayloads[ii + 1];
+      event._impl = nextImpl;
     }
   }
 }

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

@@ -16,7 +16,7 @@ import type {
   UpdatePayload,
 } from './ReactFiberHostConfig';
 import type {Fiber} from './ReactInternalTypes';
-import type {FiberRoot} from './ReactInternalTypes';
+import type {FiberRoot, EventFunctionWrapper} from './ReactInternalTypes';
 import type {Lanes} from './ReactFiberLane.old';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.old';
 import type {UpdateQueue} from './ReactFiberClassUpdateQueue.old';
@@ -667,9 +667,13 @@ function commitUseEventMount(finishedWork: Fiber) {
   const updateQueue: FunctionComponentUpdateQueue | null = (finishedWork.updateQueue: any);
   const eventPayloads = updateQueue !== null ? updateQueue.events : null;
   if (eventPayloads !== null) {
-    for (let ii = 0; ii < eventPayloads.length; ii++) {
-      const eventPayload = eventPayloads[ii];
-      eventPayload.event._impl = eventPayload.nextImpl;
+    // FunctionComponentUpdateQueue.events is a flat array of
+    // [EventFunctionWrapper, EventFunction, ...], so increment by 2 each iteration to find the next
+    // pair.
+    for (let ii = 0; ii < eventPayloads.length; ii += 2) {
+      const event: EventFunctionWrapper<any, any, any> = eventPayloads[ii];
+      const nextImpl = eventPayloads[ii + 1];
+      event._impl = nextImpl;
     }
   }
 }

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

@@ -182,14 +182,9 @@ type StoreConsistencyCheck<T> = {
   getSnapshot: () => T,
 };
 
-type EventFunctionPayload<Args, Return, F: (...Array<Args>) => Return> = {
-  event: EventFunctionWrapper<Args, Return, F>,
-  nextImpl: F,
-};
-
 export type FunctionComponentUpdateQueue = {
   lastEffect: Effect | null,
-  events: Array<EventFunctionPayload<any, any, any>> | null,
+  events: Array<() => mixed> | null,
   stores: Array<StoreConsistencyCheck<any>> | null,
   // NOTE: optional, only set when enableUseMemoCacheHook is enabled
   memoCache?: MemoCache | null,
@@ -1883,19 +1878,18 @@ function useEventImpl<Args, Return, F: (...Array<Args>) => Return>(
   event: EventFunctionWrapper<Args, Return, F>,
   nextImpl: F,
 ) {
-  const eventPayload = {event, nextImpl};
   currentlyRenderingFiber.flags |= UpdateEffect;
   let componentUpdateQueue: null | FunctionComponentUpdateQueue = (currentlyRenderingFiber.updateQueue: any);
   if (componentUpdateQueue === null) {
     componentUpdateQueue = createFunctionComponentUpdateQueue();
     currentlyRenderingFiber.updateQueue = (componentUpdateQueue: any);
-    componentUpdateQueue.events = [eventPayload];
+    componentUpdateQueue.events = [event, nextImpl];
   } else {
     const events = componentUpdateQueue.events;
     if (events === null) {
-      componentUpdateQueue.events = [eventPayload];
+      componentUpdateQueue.events = [event, nextImpl];
     } else {
-      events.push(eventPayload);
+      events.push(event, nextImpl);
     }
   }
 }

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

@@ -182,14 +182,9 @@ type StoreConsistencyCheck<T> = {
   getSnapshot: () => T,
 };
 
-type EventFunctionPayload<Args, Return, F: (...Array<Args>) => Return> = {
-  event: EventFunctionWrapper<Args, Return, F>,
-  nextImpl: F,
-};
-
 export type FunctionComponentUpdateQueue = {
   lastEffect: Effect | null,
-  events: Array<EventFunctionPayload<any, any, any>> | null,
+  events: Array<() => mixed> | null,
   stores: Array<StoreConsistencyCheck<any>> | null,
   // NOTE: optional, only set when enableUseMemoCacheHook is enabled
   memoCache?: MemoCache | null,
@@ -1883,19 +1878,18 @@ function useEventImpl<Args, Return, F: (...Array<Args>) => Return>(
   event: EventFunctionWrapper<Args, Return, F>,
   nextImpl: F,
 ) {
-  const eventPayload = {event, nextImpl};
   currentlyRenderingFiber.flags |= UpdateEffect;
   let componentUpdateQueue: null | FunctionComponentUpdateQueue = (currentlyRenderingFiber.updateQueue: any);
   if (componentUpdateQueue === null) {
     componentUpdateQueue = createFunctionComponentUpdateQueue();
     currentlyRenderingFiber.updateQueue = (componentUpdateQueue: any);
-    componentUpdateQueue.events = [eventPayload];
+    componentUpdateQueue.events = [event, nextImpl];
   } else {
     const events = componentUpdateQueue.events;
     if (events === null) {
-      componentUpdateQueue.events = [eventPayload];
+      componentUpdateQueue.events = [event, nextImpl];
     } else {
-      events.push(eventPayload);
+      events.push(event, nextImpl);
     }
   }
 }

packages/react-reconciler/src/ReactInternalTypes.js

@@ -286,7 +286,13 @@ type SuspenseCallbackOnlyFiberRootProperties = {
   hydrationCallbacks: null | SuspenseHydrationCallbacks,
 };
 
-export type EventFunctionWrapper<Args, Return, F: (...Array<Args>) => Return> = {
+// A wrapper callable object around a useEvent callback that throws if the callback is called during
+// rendering. The _impl property points to the actual implementation.
+export type EventFunctionWrapper<
+  Args,
+  Return,
+  F: (...Array<Args>) => Return,
+> = {
   (): F,
   _impl: F,
 };

packages/react-server/src/ReactFizzHooks.js

@@ -7,7 +7,10 @@
  * @flow
  */
 
-import type {Dispatcher as DispatcherType, EventFunctionWrapper} from 'react-reconciler/src/ReactInternalTypes';
+import type {
+  Dispatcher as DispatcherType,
+  EventFunctionWrapper,
+} from 'react-reconciler/src/ReactInternalTypes';
 
 import type {
   MutableSource,