React DevTools Firefox extension not showing state information

[mjsarfatti]

Do you want to request a feature or report a bug?
Request a feature

What is the current behavior?
All useState hooks are printed with a generic "State" label, making them hard to distinguish:

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

What is the expected behavior?
The name of the variable used should probably be shown, if at all possible.
Eg. const [page, setPage] = useState(1); should show up as page: 1 instead of State: 1

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
Latest Firefox on macOS Catalina, React 16.11, React DevTools 4.2.1

[lsdsjy]

You know, React DevTools depends on not compile-time information (source code) but run-time information (run-time objects, e.g. class component instance). When using this.state, its names can be inferred from its keys; but using React Hooks, your variables are defined inside the function, and local names can't be inferred from a run-time function.

[embeddedt]

Probably the only way to make this work would be for someone to write a Babel plugin that gives React the names of those variables, and/or for useState to take a second parameter that is the "friendly name" for debugging purposes.

Otherwise, you just have to compare the order of the state variables in DevTools to the order in your app and look up the names by hand.

[bvaughn]

This issue and some possible solutions is discussed thoroughly in #16474. Let's move this discussion there (if there's anything new to add). 😄