Devtools: Add support for useFormStatus

[eps1lon]

Stack:

1. DevTools: Rely on sourcemaps to compute hook name of built-in hooks in newer versions #28593
2. Devtools: Add support for useFormStatus #28413 <--- You're here
3. [Devtools] Ensure initial read of useFormStatus returns NotPendingTransition #28728

Unfortunately, the initial value will be incorrect since that value specified in the Fiber config to which react-debug-tools has no access until we land #28728.

Test plan

• yarn test ReactHooksInspectionIntegrationDOM
• inspected components with hooks (FormStatus) in the shell
• Backwards compat with 16.8: https://8qq2sv.csb.app/
• Backwards compat with 17.0: https://g67r45.csb.app/
• Backwards compat with 18.0: https://ydjfsq.csb.app/
• Compat with Experimental: https://react-devtools-hook-inspection-experimental.vercel.app/

Screen.Recording.2024-03-05.at.11.06.16.mov

[react-sizebot]

Comparing: 4f5c812...de67894

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js	=	168.76 kB	168.76 kB	=	52.91 kB	52.91 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js	=	170.57 kB	170.57 kB	=	53.44 kB	53.44 kB
facebook-www/ReactDOM-prod.classic.js	=	590.84 kB	590.84 kB	=	103.91 kB	103.91 kB
facebook-www/ReactDOM-prod.modern.js	=	566.66 kB	566.66 kB	=	100.10 kB	100.10 kB
oss-experimental/react-debug-tools/cjs/react-debug-tools.development.js	+2.30%	35.61 kB	36.43 kB	+2.06%	8.50 kB	8.67 kB
oss-stable-semver/react-debug-tools/cjs/react-debug-tools.development.js	+2.30%	35.61 kB	36.43 kB	+2.06%	8.50 kB	8.67 kB
oss-stable/react-debug-tools/cjs/react-debug-tools.development.js	+2.30%	35.61 kB	36.43 kB	+2.06%	8.50 kB	8.67 kB
oss-experimental/react-debug-tools/cjs/react-debug-tools.production.min.js	+2.25%	11.93 kB	12.20 kB	+1.22%	3.77 kB	3.82 kB
oss-stable-semver/react-debug-tools/cjs/react-debug-tools.production.min.js	+2.25%	11.93 kB	12.20 kB	+1.22%	3.77 kB	3.82 kB
oss-stable/react-debug-tools/cjs/react-debug-tools.production.min.js	+2.25%	11.93 kB	12.20 kB	+1.22%	3.77 kB	3.82 kB
test_utils/ReactAllWarnings.js	Deleted	64.44 kB	0.00 kB	Deleted	16.10 kB	0.00 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-experimental/react-debug-tools/cjs/react-debug-tools.development.js	+2.30%	35.61 kB	36.43 kB	+2.06%	8.50 kB	8.67 kB
oss-stable-semver/react-debug-tools/cjs/react-debug-tools.development.js	+2.30%	35.61 kB	36.43 kB	+2.06%	8.50 kB	8.67 kB
oss-stable/react-debug-tools/cjs/react-debug-tools.development.js	+2.30%	35.61 kB	36.43 kB	+2.06%	8.50 kB	8.67 kB
oss-experimental/react-debug-tools/cjs/react-debug-tools.production.min.js	+2.25%	11.93 kB	12.20 kB	+1.22%	3.77 kB	3.82 kB
oss-stable-semver/react-debug-tools/cjs/react-debug-tools.production.min.js	+2.25%	11.93 kB	12.20 kB	+1.22%	3.77 kB	3.82 kB
oss-stable/react-debug-tools/cjs/react-debug-tools.production.min.js	+2.25%	11.93 kB	12.20 kB	+1.22%	3.77 kB	3.82 kB
test_utils/ReactAllWarnings.js	Deleted	64.44 kB	0.00 kB	Deleted	16.10 kB	0.00 kB

Generated by 🚫 dangerJS against de67894

[eps1lon]

In the build tests in prod this comes out as Object.useHostTransitionStatus [as useFormStatus]: https://app.circleci.com/pipelines/github/facebook/react/50936/workflows/b211c172-f33c-4e9f-806e-0eec46dcd88c/jobs/796848?invite=true#step-106-1107_84

This trips up debug-tools: all subsequent hooks (even built-in ones) are consider sub hooks.

The source map is not adding the [as ...] since even without a source map I get "functionName": "Object.ia [as useFormStatus]",. Either way, the mapping from ia to useHostTransitionStatus is wrong.

[eps1lon]

The [as ...] comes from Node:

const Dispatcher = {
  useFormStatus: function ia() {
    console.log(new Error().stack);
  },
};
Dispatcher.useFormStatus();

prints

Error
    at Object.ia [as useFormStatus] (**)

the [as ...] marker is removed when the function names match. Ideally it goes away once we fix the mapping or we can just ignore it once the mapping is fixed.

[eps1lon]

Seems like a Jest issue. When I run

const React = require("react");
const ReactDOM = require("react-dom");
const ReactDebugTools = require("react-debug-tools");

function Component() {
  ReactDOM.useFormStatus();
  React.useMemo(() => {}, []);
  React.useMemo(() => {}, []);

  return null;
}

console.log(JSON.stringify(ReactDebugTools.inspectHooks(Component), null, 2));

via

$  NODE_ENV=production node --enable-source-maps test.js
[
  {
    "id": null,
    "isStateEditable": false,
    "name": "FormStatus",
    "value": null,
    "subHooks": [
      {
        "id": null,
        "isStateEditable": false,
        "name": "HostTransitionStatus",
        "value": null,
        "subHooks": [],
        "debugInfo": null,
        "hookSource": {
          "lineNumber": 139,
          "functionName": "useFormStatus",
          "fileName": "/Users/sebastian.silbermann/react-debug-tools-useFormStatus/node_modules/react-dom/cjs/react-dom.production.js",
          "columnNumber": 31
        }
      }
    ],
    "debugInfo": null,
    "hookSource": {
      "lineNumber": 6,
      "columnNumber": 12,
      "functionName": "Component",
      "fileName": "/Users/sebastian.silbermann/react-debug-tools-useFormStatus/test.js"
    }
  },
  {
    "id": 0,
    "isStateEditable": false,
    "name": "Memo",
    "subHooks": [],
    "debugInfo": null,
    "hookSource": {
      "lineNumber": 7,
      "functionName": "Component",
      "fileName": "/Users/sebastian.silbermann/react-debug-tools-useFormStatus/test.js",
      "columnNumber": 9
    }
  },
  {
    "id": 1,
    "isStateEditable": false,
    "name": "Memo",
    "subHooks": [],
    "debugInfo": null,
    "hookSource": {
      "lineNumber": 8,
      "functionName": "Component",
      "fileName": "/Users/sebastian.silbermann/react-debug-tools-useFormStatus/test.js",
      "columnNumber": 9
    }
  }
]

I get the correct output.

[eps1lon]

Doesn't work in a browser either though:

-- https://react-devtools-hook-inspection-experimental.vercel.app/

[eps1lon]

I don't see how this can happen since the dispatcher is private. Without the "wrapper -> dispatcher" assumption I'm out of ideas on how to enable arbitrary wrapper names like useHostTransitionStatus is trying to enable.

[hoxyq]

I wonder if we actually need to support renderer-specific hooks. Same as for hooks from core, we relying on the hook name, but at least we have one core. Here, I am assuming, if we had React Native renderer, we would also treat a hook named useFormStatus as primitive React hook.

[eps1lon]

I can double check but I don't think so since we only look one frame above the dispatcher which is always a core hook. So even if you would have a custom useFormStatus hook, the stacktrace would consist of

dispatcher.useSomeDispatcherHook
React.useSomeReactHook
useFormstatus

Even if RN would implement have a useFormStatus hook that's not wrapping useHostTransitionStatus, we wouldn't mix them up with this implementation since we only expect useFormStatus as a wrapper of useHostTransitionStatus.

The whole wrapperNames concept seems unnecessary though in hindsight. If we keep the assumption that a dispatcher method is wrapped by a hook and no intermediate wrappers, we could just immediately use the wrapper name.

[eps1lon]

Added a test to check we don't confuse hooks. @hoxyq let me know if that was the scenario you were talking about.

Also removed wrapperNames since we don't need that concept.

[hoxyq]

Makes

[hoxyq]

Makes sense to skip 2 frames here, but I would also keep i < hookStack.length - 1 check.
Is it guaranteed that we will always have 2 frames from react?

[eps1lon]

I can't think of a case where we wouldn't have two frames. That would mean the dispatcher call is inlined into usercode. Maybe this can happen but at that point we'll never be able to recover the original React hook name. I'll add a check regardless since it's better to display the dispatcher name than crashing.