}>Hello world<\/div>;\n+ const listener = React.unstable_useResponder(TestResponder, {\n+ preventDefault: false,\n+ });\n+ return

Hello world<\/div>;\n }\n let tree = ReactDebugTools.inspectHooks(Foo, {});\n expect(tree).toEqual([\n {\n isStateEditable: false,\n id: 0,\n- name: 'Listener',\n+ name: 'Responder',\n value: {props: {preventDefault: false}, responder: 'TestResponder'},\n subHooks: [],\n },\ndiff --git a\/packages\/react-dom\/src\/client\/ReactDOMComponent.js b\/packages\/react-dom\/src\/client\/ReactDOMComponent.js\nindex 55db92a52f..c2c3b79186 100644\n--- a\/packages\/react-dom\/src\/client\/ReactDOMComponent.js\n+++ b\/packages\/react-dom\/src\/client\/ReactDOMComponent.js\n@@ -98,7 +98,7 @@ const AUTOFOCUS = 'autoFocus';\n const CHILDREN = 'children';\n const STYLE = 'style';\n const HTML = '__html';\n-const RESPONDERS = 'responders';\n+const LISTENERS = 'listeners';\n \n const {html: HTML_NAMESPACE} = Namespaces;\n \n@@ -341,7 +341,7 @@ function setInitialDOMProperties(\n setTextContent(domElement, '' + nextProp);\n }\n } else if (\n- (enableFlareAPI && propKey === RESPONDERS) ||\n+ (enableFlareAPI && propKey === LISTENERS) ||\n propKey === SUPPRESS_CONTENT_EDITABLE_WARNING ||\n propKey === SUPPRESS_HYDRATION_WARNING\n ) {\n@@ -698,7 +698,7 @@ export function diffProperties(\n } else if (propKey === DANGEROUSLY_SET_INNER_HTML || propKey === CHILDREN) {\n \/\/ Noop. This is handled by the clear text mechanism.\n } else if (\n- (enableFlareAPI && propKey === RESPONDERS) ||\n+ (enableFlareAPI && propKey === LISTENERS) ||\n propKey === SUPPRESS_CONTENT_EDITABLE_WARNING ||\n propKey === SUPPRESS_HYDRATION_WARNING\n ) {\n@@ -790,7 +790,7 @@ export function diffProperties(\n (updatePayload = updatePayload || []).push(propKey, '' + nextProp);\n }\n } else if (\n- (enableFlareAPI && propKey === RESPONDERS) ||\n+ (enableFlareAPI && propKey === LISTENERS) ||\n propKey === SUPPRESS_CONTENT_EDITABLE_WARNING ||\n propKey === SUPPRESS_HYDRATION_WARNING\n ) {\n@@ -1045,7 +1045,7 @@ export function diffHydratedProperties(\n if (suppressHydrationWarning) {\n \/\/ Don't bother comparing. We're ignoring all these warnings.\n } else if (\n- (enableFlareAPI && propKey === RESPONDERS) ||\n+ (enableFlareAPI && propKey === LISTENERS) ||\n propKey === SUPPRESS_CONTENT_EDITABLE_WARNING ||\n propKey === SUPPRESS_HYDRATION_WARNING ||\n \/\/ Controlled attributes are not validated\ndiff --git a\/packages\/react-dom\/src\/events\/DOMEventResponderSystem.js b\/packages\/react-dom\/src\/events\/DOMEventResponderSystem.js\nindex 4be4fa8139..f034670465 100644\n--- a\/packages\/react-dom\/src\/events\/DOMEventResponderSystem.js\n+++ b\/packages\/react-dom\/src\/events\/DOMEventResponderSystem.js\n@@ -12,12 +12,7 @@ import {\n PASSIVE_NOT_SUPPORTED,\n } from 'events\/EventSystemFlags';\n import type {AnyNativeEvent} from 'events\/PluginModuleType';\n-import {\n- HostComponent,\n- FunctionComponent,\n- MemoComponent,\n- ForwardRef,\n-} from 'shared\/ReactWorkTags';\n+import {HostComponent} from 'shared\/ReactWorkTags';\n import type {EventPriority} from 'shared\/ReactTypes';\n import type {\n ReactDOMEventResponder,\n@@ -67,7 +62,7 @@ export function setListenToResponderEventTypes(\n }\n \n type EventQueueItem = {|\n- listeners: Array<(val: any) => void>,\n+ listener: (val: any) => void,\n value: any,\n |};\n type EventQueue = Array;\n@@ -103,8 +98,8 @@ let currentDocument: null | Document = null;\n \n const eventResponderContext: ReactDOMResponderContext = {\n dispatchEvent(\n- eventProp: string,\n eventValue: any,\n+ eventListener: any => void,\n eventPriority: EventPriority,\n ): void {\n validateResponderContext();\n@@ -112,15 +107,9 @@ const eventResponderContext: ReactDOMResponderContext = {\n if (eventPriority < currentEventQueuePriority) {\n currentEventQueuePriority = eventPriority;\n }\n- const responderInstance = ((currentInstance: any): ReactDOMEventResponderInstance);\n- const target = responderInstance.fiber;\n- const responder = responderInstance.responder;\n- const listeners = collectListeners(eventProp, responder, target);\n- if (listeners.length !== 0) {\n- ((currentEventQueue: any): EventQueue).push(\n- createEventQueueItem(eventValue, listeners),\n- );\n- }\n+ ((currentEventQueue: any): EventQueue).push(\n+ createEventQueueItem(eventValue, eventListener),\n+ );\n },\n isTargetWithinResponder(target: Element | Document): boolean {\n validateResponderContext();\n@@ -392,11 +381,11 @@ function collectFocusableElements(\n \n function createEventQueueItem(\n value: any,\n- listeners: Array<(val: any) => void>,\n+ listener: (val: any) => void,\n ): EventQueueItem {\n return {\n value,\n- listeners,\n+ listener,\n };\n }\n \n@@ -519,70 +508,11 @@ function createDOMResponderEvent(\n };\n }\n \n-function collectListeners(\n- eventProp: string,\n- eventResponder: ReactDOMEventResponder,\n- target: Fiber,\n-): Array<(any) => void> {\n- const eventListeners = [];\n- let node = target.return;\n- nodeTraversal: while (node !== null) {\n- switch (node.tag) {\n- case HostComponent: {\n- const dependencies = node.dependencies;\n-\n- if (dependencies !== null) {\n- const respondersMap = dependencies.responders;\n-\n- if (respondersMap !== null && respondersMap.has(eventResponder)) {\n- break nodeTraversal;\n- }\n- }\n- break;\n- }\n- case FunctionComponent:\n- case MemoComponent:\n- case ForwardRef: {\n- const dependencies = node.dependencies;\n-\n- if (dependencies !== null) {\n- const listeners = dependencies.listeners;\n-\n- if (listeners !== null) {\n- for (\n- let s = 0, listenersLength = listeners.length;\n- s < listenersLength;\n- s++\n- ) {\n- const listener = listeners[s];\n- const {responder, props} = listener;\n- const listenerFunc = props[eventProp];\n-\n- if (\n- responder === eventResponder &&\n- typeof listenerFunc === 'function'\n- ) {\n- eventListeners.push(listenerFunc);\n- }\n- }\n- }\n- }\n- }\n- }\n- node = node.return;\n- }\n- return eventListeners;\n-}\n-\n function processEvents(eventQueue: EventQueue): void {\n for (let i = 0, length = eventQueue.length; i < length; i++) {\n- const {value, listeners} = eventQueue[i];\n- for (let s = 0, length2 = listeners.length; s < length2; s++) {\n- const listener = listeners[s];\n- const type =\n- typeof value === 'object' && value !== null ? value.type : '';\n- invokeGuardedCallbackAndCatchFirstError(type, listener, undefined, value);\n- }\n+ const {value, listener} = eventQueue[i];\n+ const type = typeof value === 'object' && value !== null ? value.type : '';\n+ invokeGuardedCallbackAndCatchFirstError(type, listener, undefined, value);\n }\n }\n \n@@ -663,6 +593,7 @@ function traverseAndHandleEventResponderInstances(\n \/\/ - Bubble target responder phase\n \/\/ - Root responder phase\n \n+ const visitedResponders = new Set();\n const responderEvent = createDOMResponderEvent(\n topLevelType,\n nativeEvent,\n@@ -670,7 +601,6 @@ function traverseAndHandleEventResponderInstances(\n isPassiveEvent,\n isPassiveSupported,\n );\n- const visitedResponders = new Set();\n let node = targetFiber;\n while (node !== null) {\n const {dependencies, tag} = node;\n@@ -687,8 +617,8 @@ function traverseAndHandleEventResponderInstances(\n !visitedResponders.has(responder) &&\n validateResponderTargetEventTypes(eventType, responder)\n ) {\n- const onEvent = responder.onEvent;\n visitedResponders.add(responder);\n+ const onEvent = responder.onEvent;\n if (onEvent !== null) {\n currentInstance = responderInstance;\n responderEvent.responderTarget = ((target: any):\ndiff --git a\/packages\/react-dom\/src\/events\/__tests__\/DOMEventResponderSystem-test.internal.js b\/packages\/react-dom\/src\/events\/__tests__\/DOMEventResponderSystem-test.internal.js\nindex 7efbeaa5f1..6a4894de17 100644\n--- a\/packages\/react-dom\/src\/events\/__tests__\/DOMEventResponderSystem-test.internal.js\n+++ b\/packages\/react-dom\/src\/events\/__tests__\/DOMEventResponderSystem-test.internal.js\n@@ -87,19 +87,28 @@ describe('DOMEventResponderSystem', () => {\n jest.resetModules();\n ReactFeatureFlags = require('shared\/ReactFeatureFlags');\n ReactFeatureFlags.enableFlareAPI = true;\n+ React = require('react');\n ReactTestRenderer = require('react-test-renderer');\n const TestResponder = createEventResponder({});\n- const renderer = ReactTestRenderer.create(\n-

}>Hello world<\/div>,\n- );\n+\n+ function Test() {\n+ const listener = React.unstable_useResponder(TestResponder, {});\n+\n+ return

Hello world<\/div>;\n+ }\n+ const renderer = ReactTestRenderer.create();\n expect(renderer).toMatchRenderedOutput(

Hello world<\/div>);\n });\n \n it('can render correctly with the ReactDOMServer', () => {\n const TestResponder = createEventResponder({});\n- const output = ReactDOMServer.renderToString(\n-

}>Hello world<\/div>,\n- );\n+\n+ function Test() {\n+ const listener = React.unstable_useResponder(TestResponder, {});\n+\n+ return

Hello world<\/div>;\n+ }\n+ const output = ReactDOMServer.renderToString();\n expect(output).toBe(`

Hello world<\/div>`);\n });\n \n@@ -121,11 +130,15 @@ describe('DOMEventResponderSystem', () => {\n },\n });\n \n- const Test = () => (\n-

dillon1000/react

Files changed