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 6a4894de173..14c52faefd4 100644
--- a/packages/react-dom/src/events/__tests__/DOMEventResponderSystem-test.internal.js
+++ b/packages/react-dom/src/events/__tests__/DOMEventResponderSystem-test.internal.js
@@ -112,6 +112,35 @@ describe('DOMEventResponderSystem', () => {
expect(output).toBe(`
Hello world
`);
});
+ it('can render correctly with the ReactDOMServer hydration', () => {
+ const onEvent = jest.fn();
+ const TestResponder = createEventResponder({
+ targetEventTypes: ['click'],
+ onEvent,
+ });
+ const ref = React.createRef();
+
+ function Test() {
+ const listener = React.unstable_useResponder(TestResponder, {});
+
+ return (
+
+
+ Hello world
+
+
+ );
+ }
+ const output = ReactDOMServer.renderToString();
+ expect(output).toBe(
+ `Hello world
`,
+ );
+ container.innerHTML = output;
+ ReactDOM.hydrate(, container);
+ dispatchClickEvent(ref.current);
+ expect(onEvent).toHaveBeenCalledTimes(1);
+ });
+
it('the event responders should fire on click event', () => {
let eventResponderFiredCount = 0;
let eventLog = [];
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.js b/packages/react-reconciler/src/ReactFiberCompleteWork.js
index 5d635f4b5fb..d77db8557ae 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.js
@@ -739,6 +739,18 @@ function completeWork(
// commit-phase we mark this as such.
markUpdate(workInProgress);
}
+ if (enableFlareAPI) {
+ const instance = workInProgress.stateNode;
+ const listeners = newProps.listeners;
+ if (listeners != null) {
+ updateEventListeners(
+ listeners,
+ instance,
+ rootContainerInstance,
+ workInProgress,
+ );
+ }
+ }
} else {
let instance = createInstance(
type,