Experimental Event API: add event component mount phase callback

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

@@ -626,6 +626,19 @@ export function mountEventResponder(
   if (responder.onOwnershipChange !== undefined) {
     ownershipChangeListeners.add(eventComponentInstance);
   }
+  const onMount = responder.onMount;
+  if (onMount !== undefined) {
+    let {props, state} = eventComponentInstance;
+    currentEventQueue = createEventQueue();
+    currentInstance = eventComponentInstance;
+    try {
+      onMount(eventResponderContext, props, state);
+    } finally {
+      currentEventQueue = null;
+      currentInstance = null;
+      currentTimers = null;
+    }
+  }
 }
 
 export function unmountEventResponder(

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

@@ -18,13 +18,15 @@ function createReactEventComponent(
   targetEventTypes,
   createInitialState,
   onEvent,
+  onMount,
   onUnmount,
   onOwnershipChange,
 ) {
   const testEventResponder = {
     targetEventTypes,
     createInitialState,
     onEvent,
+    onMount,
     onUnmount,
     onOwnershipChange,
   };
@@ -559,12 +561,35 @@ describe('DOMEventResponderSystem', () => {
     ]);
   });
 
+  it('the event responder onMount() function should fire', () => {
+    let onMountFired = 0;
+
+    const EventComponent = createReactEventComponent(
+      [],
+      undefined,
+      undefined,
+      () => {
+        onMountFired++;
+      },
+    );
+
+    const Test = () => (
+      <EventComponent>
+        <button />
+      </EventComponent>
+    );
+
+    ReactDOM.render(<Test />, container);
+    expect(onMountFired).toEqual(1);
+  });
+
   it('the event responder onUnmount() function should fire', () => {
     let onUnmountFired = 0;
 
     const EventComponent = createReactEventComponent(
       [],
       undefined,
+      undefined,
       (event, context, props, state) => {},
       () => {
         onUnmountFired++;
@@ -590,7 +615,8 @@ describe('DOMEventResponderSystem', () => {
       () => ({
         incrementAmount: 5,
       }),
-      (event, context, props, state) => {},
+      undefined,
+      undefined,
       (context, props, state) => {
         counter += state.incrementAmount;
       },
@@ -621,6 +647,7 @@ describe('DOMEventResponderSystem', () => {
         }
       },
       undefined,
+      undefined,
       () => {
         onOwnershipChangeFired++;
       },

packages/react-reconciler/src/ReactFiberCommitWork.js

@@ -98,6 +98,7 @@ import {
   unhideTextInstance,
   unmountEventComponent,
   commitEventTarget,
+  mountEventComponent,
 } from './ReactFiberHostConfig';
 import {
   captureCommitPhaseError,
@@ -595,6 +596,7 @@ function commitLifeCycles(
     case SuspenseComponent:
     case IncompleteClassComponent:
     case EventTarget:
+    case EventComponent:
       break;
     default: {
       invariant(
@@ -835,7 +837,8 @@ function commitContainer(finishedWork: Fiber) {
     case ClassComponent:
     case HostComponent:
     case HostText:
-    case EventTarget: {
+    case EventTarget:
+    case EventComponent: {
       return;
     }
     case HostRoot:
@@ -1255,6 +1258,10 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
     case IncompleteClassComponent: {
       return;
     }
+    case EventComponent: {
+      mountEventComponent(finishedWork.stateNode);
+      return;
+    }
     default: {
       invariant(
         false,

packages/react-reconciler/src/ReactFiberCompleteWork.js

@@ -68,7 +68,6 @@ import {
   createContainerChildSet,
   appendChildToContainerChildSet,
   finalizeContainerChildren,
-  mountEventComponent,
   updateEventComponent,
   handleEventTarget,
 } from './ReactFiberHostConfig';
@@ -813,13 +812,12 @@ function completeWork(
             responderState = responder.createInitialState(newProps);
           }
           eventComponentInstance = workInProgress.stateNode = {
-            context: null,
             props: newProps,
             responder,
             rootInstance: rootContainerInstance,
             state: responderState,
           };
-          mountEventComponent(eventComponentInstance);
+          markUpdate(workInProgress);
         } else {
           // Update the props on the event component state node
           eventComponentInstance.props = newProps;

packages/shared/ReactTypes.js

@@ -94,6 +94,11 @@ export type ReactEventResponder = {
     props: null | Object,
     state: null | Object,
   ) => boolean,
+  onMount: (
+    context: ReactResponderContext,
+    props: null | Object,
+    state: null | Object,
+  ) => void,
   onUnmount: (
     context: ReactResponderContext,
     props: null | Object,
@@ -107,7 +112,6 @@ export type ReactEventResponder = {
 };
 
 export type ReactEventComponentInstance = {|
-  context: null | Object,
   props: null | Object,
   responder: ReactEventResponder,
   rootInstance: mixed,