How to display a label from useState hook

[togakangaroo]

Picking up on this comment about how to get a nice semantic label displaying from a bit of state created by the useState function.

Currently, when we useState all you can see in devtools is something like this.

Obviously that's not great but how to reliably show a label there given that the runtime doesn't necessarily have that context without introspecting over the function body itself (and even then its not perfect)

I have a few suggestions.

1. Definitely the api should probably be changed to allow passing in a label as a second parameter to useState - make it optional but have the option
2. At least show the invocation number if there's more than one useState in a render - so State[0] for the first usage of useState State[1] for the second, etc
3. If the state is an object with a single key maybe consider that as the label? If I do setSomeBitOfState({ foo: someVal }) then by all means, let's have foo be immediately visible!
4. This one is a stretch but let's say useState is called within a custom hook, then maybe when react devtools is running, the first time a given useState is called you can walk the callstack, grab the function name that contains useState and - if its not the render method - use that as the label?

Between the above 4 there should be enough there to cover 80% of cases, what do you think?

[fanny]

the community has created some initiatives in this direction, this comment may be useful for you

[bvaughn]

React DevTools has been rewritten and recently launched a new version 4 UI. The source code for this rewrite was done in a separate repository and now lives in the main React repo (github.com/facebook/react).

Because version 4 was a total rewrite, and all issues in this repository are related to the old version 3 of the extension, I am closing all issues in this repository. If you can still reproduce this issue, or believe this feature request is still relevant, please open a new issue in the React repo: https://github.com/facebook/react/issues/new?labels=Component:%20Developer%20Tools