DevTools: support useEffectEvent and forward-fix experimental prefix support

Author: hoxyq

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

@@ -127,6 +127,9 @@ function getPrimitiveStackCache(): Map<string, Array<any>> {
       }
 
       Dispatcher.useId();
+
+      Dispatcher.useResourceEffect(() => ({}), []);
+      Dispatcher.useEffectEvent(() => {});
     } finally {
       readHookLog = hookLog;
       hookLog = [];
@@ -749,6 +752,18 @@ function useResourceEffect(
   });
 }
 
+function useEffectEvent(callback: () => mixed) {
+  nextHook();
+  hookLog.push({
+    displayName: null,
+    primitive: 'EffectEvent',
+    stackError: new Error(),
+    value: callback,
+    debugInfo: null,
+    dispatcherHookName: 'EffectEvent',
+  });
+}
+
 const Dispatcher: DispatcherType = {
   use,
   readContext,
@@ -773,6 +788,7 @@ const Dispatcher: DispatcherType = {
   useFormState,
   useActionState,
   useHostTransitionStatus,
+  useEffectEvent,
   useResourceEffect,
 };
 
@@ -962,7 +978,7 @@ function parseHookName(functionName: void | string): string {
     startIndex += 'unstable_'.length;
   }
 
-  if (functionName.slice(startIndex).startsWith('unstable_')) {
+  if (functionName.slice(startIndex).startsWith('experimental_')) {
     startIndex += 'experimental_'.length;
   }
 

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

@@ -2713,4 +2713,71 @@ describe('ReactHooksInspectionIntegration', () => {
       ]
     `);
   });
+
+  // @gate enableUseEffectEventHook
+  it('should support useEffectEvent hook', async () => {
+    function Foo() {
+      // eslint-disable-next-line no-unused-vars
+      const [state, myState] = React.useState();
+      React.experimental_useEffectEvent(function effect() {});
+      React.useMemo(() => 'memo', []);
+
+      return null;
+    }
+
+    let renderer;
+    await act(() => {
+      renderer = ReactTestRenderer.create(<Foo />, {
+        unstable_isConcurrent: true,
+      });
+    });
+    const childFiber = renderer.root.findByType(Foo)._currentFiber();
+    const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
+    expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`
+      [
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 0,
+          "isStateEditable": true,
+          "name": "State",
+          "subHooks": [],
+          "value": undefined,
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 1,
+          "isStateEditable": false,
+          "name": "EffectEvent",
+          "subHooks": [],
+          "value": [Function],
+        },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": 2,
+          "isStateEditable": false,
+          "name": "Memo",
+          "subHooks": [],
+          "value": "memo",
+        },
+      ]
+    `);
+  });
 });

packages/react-devtools-shell/src/app/InspectableElements/InspectableElements.js

@@ -19,6 +19,7 @@ import NestedProps from './NestedProps';
 import SimpleValues from './SimpleValues';
 import SymbolKeys from './SymbolKeys';
 import UseMemoCache from './UseMemoCache';
+import UseEffectEvent from './UseEffectEvent';
 
 // TODO Add Immutable JS example
 
@@ -36,6 +37,7 @@ export default function InspectableElements(): React.Node {
       <CircularReferences />
       <SymbolKeys />
       <UseMemoCache />
+      <UseEffectEvent />
     </Fragment>
   );
 }

packages/react-devtools-shell/src/app/InspectableElements/UseEffectEvent.js

@@ -0,0 +1,32 @@
+import * as React from 'react';
+
+const {experimental_useEffectEvent, useState, useEffect} = React;
+
+export default function UseEffectEvent(): React.Node {
+  return (
+    <>
+      <SingleHookCase />
+      <HookTreeCase />
+    </>
+  );
+}
+
+function SingleHookCase() {
+  experimental_useEffectEvent(() => {});
+
+  return null;
+}
+
+function useCustomHook() {
+  const [state, setState] = useState();
+  experimental_useEffectEvent(() => {});
+  useEffect(() => {});
+
+  return [state, setState];
+}
+
+function HookTreeCase() {
+  useCustomHook();
+
+  return null;
+}