[Flare] Adds useListener implementation to ReactDebugHooks

packages/react-debug-tools/src/ReactDebugHooks.js

@@ -7,7 +7,11 @@
  * @flow
  */
 
-import type {ReactContext, ReactProviderType} from 'shared/ReactTypes';
+import type {
+  ReactContext,
+  ReactProviderType,
+  ReactEventResponder,
+} from 'shared/ReactTypes';
 import type {Fiber} from 'react-reconciler/src/ReactFiber';
 import type {Hook} from 'react-reconciler/src/ReactFiberHooks';
 import type {Dispatcher as DispatcherType} from 'react-reconciler/src/ReactFiberHooks';
@@ -21,6 +25,8 @@ import {
   ForwardRef,
 } from 'shared/ReactWorkTags';
 
+const emptyObject = {};
+
 type CurrentDispatcherRef = typeof ReactSharedInternals.ReactCurrentDispatcher;
 
 // Used to track hooks called during a render
@@ -215,8 +221,16 @@ function useMemo<T>(
   return value;
 }
 
-function useListener() {
-  throw new Error('TODO: not yet implemented');
+function useListener(
+  responder: ReactEventResponder<any, any>,
+  hookProps: ?Object,
+): void {
+  const listenerProps = hookProps || emptyObject;
+  const value = {
+    responder,
+    props: listenerProps,
+  };
+  hookLog.push({primitive: 'Listener', stackError: new Error(), value});
 }
 
 const Dispatcher: DispatcherType = {

packages/react-debug-tools/src/__tests__/ReactHooksInspection-test.js

@@ -332,4 +332,29 @@ describe('ReactHooksInspection', () => {
       ]);
     });
   });
+
+  it('should inspect a simple useListener hook', () => {
+    jest.resetModules();
+    const ReactFeatureFlags = require('shared/ReactFeatureFlags');
+    ReactFeatureFlags.enableFlareAPI = true;
+    React = require('react');
+    ReactDebugTools = require('react-debug-tools');
+
+    const TestResponder = React.unstable_createResponder('TestResponder', {});
+
+    function Foo(props) {
+      React.unstable_useListener(TestResponder, {preventDefault: false});
+      return <div responders={<TestResponder />}>Hello world</div>;
+    }
+    let tree = ReactDebugTools.inspectHooks(Foo, {});
+    expect(tree).toEqual([
+      {
+        isStateEditable: false,
+        id: 0,
+        name: 'Listener',
+        value: {props: {preventDefault: false}, responder: TestResponder},
+        subHooks: [],
+      },
+    ]);
+  });
 });