diff --git a/packages/react-dom/src/events/DOMEventResponderSystem.js b/packages/react-dom/src/events/DOMEventResponderSystem.js
index 2e3da99145f45..cc45200622cc6 100644
--- a/packages/react-dom/src/events/DOMEventResponderSystem.js
+++ b/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(
diff --git a/packages/react-dom/src/events/__tests__/DOMEventResponderSystem-test.internal.js b/packages/react-dom/src/events/__tests__/DOMEventResponderSystem-test.internal.js
index 8d476b4568cd5..a92223e39078f 100644
--- a/packages/react-dom/src/events/__tests__/DOMEventResponderSystem-test.internal.js
+++ b/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 = () => (
+
+
+
+ );
+
+ ReactDOM.render(, 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++;
},
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.js b/packages/react-reconciler/src/ReactFiberCommitWork.js
index 3bf04ea9c11a7..b28401538ee96 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.js
+++ b/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,
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.js b/packages/react-reconciler/src/ReactFiberCompleteWork.js
index da05076c53da8..9bf288fc63ee2 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.js
+++ b/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;
diff --git a/packages/shared/ReactTypes.js b/packages/shared/ReactTypes.js
index d625733dfd335..7de348fecb07b 100644
--- a/packages/shared/ReactTypes.js
+++ b/packages/shared/ReactTypes.js
@@ -108,12 +108,17 @@ 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,
@@ -121,7 +126,6 @@ export type ReactEventResponder = {
};
export type ReactEventComponentInstance = {|
- context: null | Object,
props: null | Object,
responder: ReactEventResponder,
rootEventTypes: null | Set,