Experimental Event API: add event component mount phase callback (#15480

)

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

@@ -612,7 +612,10 @@ function triggerOwnershipListeners(): void {
       const instance = listeningInstances[i];
       const {props, responder, state} = instance;
       currentInstance = instance;
-      responder.onOwnershipChange(eventResponderContext, props, state);
+      const onOwnershipChange = responder.onOwnershipChange;
+      if (onOwnershipChange !== undefined) {
+        onOwnershipChange(eventResponderContext, props, state);
+      }
     }
   } finally {
     currentInstance = previousInstance;
@@ -626,6 +629,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

@@ -21,6 +21,7 @@ function createReactEventComponent(
   onEvent,
   onEventCapture,
   onRootEvent,
+  onMount,
   onUnmount,
   onOwnershipChange,
   stopLocalPropagation,
@@ -32,6 +33,7 @@ function createReactEventComponent(
     onEvent,
     onEventCapture,
     onRootEvent,
+    onMount,
     onUnmount,
     onOwnershipChange,
     stopLocalPropagation: stopLocalPropagation || false,
@@ -395,6 +397,7 @@ describe('DOMEventResponderSystem', () => {
       undefined,
       undefined,
       undefined,
+      undefined,
       true,
     );
 
@@ -554,6 +557,31 @@ describe('DOMEventResponderSystem', () => {
     ]);
   });
 
+  it('the event responder onMount() function should fire', () => {
+    let onMountFired = 0;
+
+    const EventComponent = createReactEventComponent(
+      [],
+      undefined,
+      undefined,
+      undefined,
+      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;
 
@@ -563,7 +591,8 @@ describe('DOMEventResponderSystem', () => {
       undefined,
       undefined,
       undefined,
-      (event, context, props, state) => {},
+      undefined,
+      undefined,
       () => {
         onUnmountFired++;
       },
@@ -592,6 +621,7 @@ describe('DOMEventResponderSystem', () => {
       undefined,
       undefined,
       undefined,
+      undefined,
       (context, props, state) => {
         counter += state.incrementAmount;
       },
@@ -623,6 +653,7 @@ describe('DOMEventResponderSystem', () => {
       undefined,
       undefined,
       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,14 +812,13 @@ function completeWork(
             responderState = responder.createInitialState(newProps);
           }
           eventComponentInstance = workInProgress.stateNode = {
-            context: null,
             props: newProps,
             responder,
             rootEventTypes: null,
             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

@@ -108,20 +108,24 @@ export type ReactEventResponder = {
     props: null | Object,
     state: null | Object,
   ) => void,
-  onUnmount: (
+  onMount?: (
     context: ReactResponderContext,
     props: null | Object,
     state: null | Object,
   ) => void,
-  onOwnershipChange: (
+  onUnmount?: (
+    context: ReactResponderContext,
+    props: null | Object,
+    state: null | Object,
+  ) => void,
+  onOwnershipChange?: (
     context: ReactResponderContext,
     props: null | Object,
     state: null | Object,
   ) => void,
 };
 
 export type ReactEventComponentInstance = {|
-  context: null | Object,
   props: null | Object,
   responder: ReactEventResponder,
   rootEventTypes: null | Set<string>,