React-devtools: ☂️ Hooks umbrella task

[bvaughn]

Support hooks! (to be filled in later)

Features

• [ ] Support inspecting complex values (like objects and arrays) in useState. (https://github.com/bvaughn/react-devtools-experimental/commit/0008bb00)
• [x] For the selected component, show hooks name, location, and value (when applicable) in props panel. (Related to facebook/react/pull/14085)
• [ ] Make sure to include support for memo and forwardRef components.

Bugs

• [ ] #1216: Highlight Updates incorrectly reports an updates in a tree component.

[taras]

@bvaughn I accidentally created an issue instead of a comment because I already started writing the description in an issue. Here is the issue that I created https://github.com/facebook/react-devtools/issues/1216

[bvaughn]

That's fine. I'll just link to it for now.

[Jessidhia]

At least setting state = fiber.memoizedState on Memo and ForwardRef fibers would let us be able to inspect the raw hook state in those components. It'd still not really fix _this_ issue as the DX would still be bad (you'd be looking through the raw linked list), but it'd make it _only_ just as bad as regular FunctionComponent fibers.

[bvaughn]

At least setting state = fiber.memoizedState on Memo and ForwardRef fibers would let us be able to inspect the raw hook state in those component

I don't think this would be very useful. We plan to add hooks support _soon_. Let's just tackle it then.

[cbdeveloper]

I'm not getting the state names and context values while using hooks useState and useContext. Is there support for this yet?

React Docs says that "React Hooks are now supported by React DevTools". Is this correct?

[nukisman]

Hey! What about showing hook name in ReactDevTools instead of State? Is it possible?
@bvaughn

[bvaughn]

We do show the name of hook (e.g. AddProductContainer, State, Context in the above). I think what you're suggesting is showing a name based on the variable you assign to? That's been suggested a time or two before (e.g. here).

We couldn't do this without a new API (and maybe an extra compilation step) to add a name. I've thought about this a little, and I don't think it would be all that useful since hooks are shown in the order they're declared in the function, and also their values are enough to identify them.

[nukisman]

@bvaughn ok. I see. It could be API like this useState(value, [debugName])

What about useDebugValue ? Docs say: useDebugValue can be used to display a label for custom hooks in React DevTools.
But it don't appear in the dev tools. Is it a bug or I do smth wrong?

[bvaughn]

I assume you're doing something wrong, because useDebugValue does appear in the DevTools based on my testing. (If you think you've found a bug, file a separate issue with repro code.)

[nukisman]

@bvaughn Oh, I see! It is for custom hooks only!
Thank you!

[cbdeveloper]

We do show the name of hook (e.g. AddProductContainer, State, Context in the above). I think what you're suggesting is showing a name based on the variable you assign to? That's been suggested a time or two before (e.g. here).

We couldn't do this without a new API (and maybe an extra compilation step) to add a name. I've thought about this a little, and I don't think it would be all that useful since hooks are shown in the order they're declared in the function, and also their values are enough to identify them.

@bvaughn Exactly! I think it's important to inspect the state variable name. I'm not a really experienced developer, but so far I think this would be extremely useful. Especially after reading the following tip (picture below) in React Docs. Imagine if all the fruits were boolean. If I had to do that, I would be inclined to create a state object and store the fruits as properties. But then I would be moving away from the DOC and would have to be extra careful when updating nested properties. Thanks so much for every contributors' work. Hope I'll get experienced enough to give back to the community some day.

• State: true
• State: false
• State: true
• State: true

Which one is which?

[itsMapleLeaf]

While you have a valid point, having those various boolean flags, you probably want a useReducer or state machine instead 🤷‍♂️

[bvaughn]

@cbdeveloper I haven't thought of a good way for DevTools to be able to display the variable name like you're asking. DevTools doesn't have a way to read your function's private variables, and changing the API to support passing in a display name would increase the size of component code. It also just doesn't seem necessary to me, more like a nice to have.

Anyway, this umbrella issue is not the best place to have discussions like this. If you feel strongly about it, I suggest opening a new issue.

[togakangaroo]

Suggestions on how to add a more helpful useState label in this ticket

[danhnn]

Hi @bvaughn, how can I use DevTool rewrite with react-native ? Currently I see It works in web only.

[bvaughn]

There's no React Native support yet.

[CGQAQ]

it's the end of April, still not support

[MichaelDeBoey]

@CGQAQ Please just appreciate all the work @bvaughn is doing for the community in his (maybe not so) spare time 😉

[bvaughn]

Thanks Michael!

Support for the items in this umbrella task have already been added to the DevTools beta (although it does not yet support React Native, as mentioned above).

Both the new and old DevTools satisfy this item¹:

• For the selected component, show hooks name, location, and value (when applicable) in props panel.

The DevTools beta also satisfies these items:

• Support inspecting complex values (like objects and arrays) in useState.
• Make sure to include support for memo and forwardRef components.

¹ Neither DevTools version shows the "location" of the hook.

[joniler]

Thank the lord for you @bvaughn... Really wanted to start using Hooks, but the lack of ability to view state in DevTools really threw a wrench in that, as I'm a beginner dev. Where can I donate a couple bucks to buy you a beer? 🍻

[bvaughn]

No need @joniler, although I appreciate the kind offer.

[CGQAQ]

@CGQAQ Please just appreciate all the work @bvaughn is doing for the community in his (maybe not so) spare time 😉

I didn't mean that, I am VERY appreciate him for his amazing devtool

[bvaughn]

No worries, although thanks for clarifying.

[dfagan2]

Just a caution for those exploring the beta version, I was experiencing infinite re-renders with it installed. Reverting to the stable version seems to have fixed that for me.

Not to say there wasn't some other variable in that equation (code, environment, etc), though I did strip my scenario down to the studs without luck before the lightbulb went off.

Just wanted to call that out in case it helps anyone.

[bvaughn]

I was experiencing infinite re-renders with it installed.

Can you elaborate?

[dfagan2]

Had a functional component that, on ~95% of fresh page loads, would continually print a console.log I had at the root, even though none of the inbound props or the state (via useState) were changing.

[bvaughn]

Sounds like that's expected because of how DevTools detects hooks values. It shallow renders the component that's selected in the Components tab every second to see if its values have changed.

(Check out here, here, and here for the source if you're curious.) Shouldn't actually be a perf concern.

[dfagan2]

Ok. Is there any way to tip off developers that "this re-render was triggered from DevTools"? Because normally, in the wild, seeing something like that is like HALT-ALL-PRODUCTION-DEPLOYS panic inducing. And it took me a long while to figure out it was due to me experimenting with this beta version.

(unless there is a way to deduce that from the call stack that I was missing)

[bvaughn]

Not sure how DevTools would inform you of this. Any suggestions?

Callstack might be a reasonable tip off.

[dfagan2]

Callstack might have had the info, but I tend to get lost in there once it goes under the hood, so I wouldn't be surprised if I missed it.

But maybe this extension could emit a console log of its own with a warning to the effect of what you just mentioned?

React DevTools Heads Up: [name of component that's selected in the Components tab] will be re-rendered every second to detect changes

Or maybe something in the Profiler? I ran that while it was in its loop to see if it picked up anything, but it was blank. Some sort of indicator there would have also been a good tip.

[bvaughn]

Hmm....Logging things to the console seems like it could be pretty annoying. (I hate my console being filled with clutter.)

Or maybe something in the Profiler? I ran that while it was in its loop to see if it picked up anything, but it was blank. Some sort of indicator there would have also been a good tip.

Not sure what you mean? Doesn't seem profiler specific?

[dfagan2]

Doesn't seem profiler specific?

Probably right, just throwing out ideas.

(I hate my console being filled with clutter.)

I think a single message on page load wouldn't be too invasive, and if it can save panic and wasted debugging time for developers, it might be more of a worthwhile tip than "clutter"

[bvaughn]

I can only speak for myself, but I would find even a single console log that was printed once _every_ time I load a page to be pretty annoying. Guess it depends on how much this causes people to be alarmed, as you say. This is the first time it's come up actually! But not a lot of people are using the new extension yet.

[dfagan2]

Could always set it up as a console.info so that developers can filter away that tier.

I mean, it's kind of a big deal that it re-renders indefinitely, because any breakpoint you have in there to debug your work is going to get repeatably triggered (which is how I first noticed it), and that feels like an infinite loop, which in programming is ... alarming. I'd be willing to bet that it'll come up more often as adoption grows. At the very least, if its expected behavior, it should at least not be a hidden easter egg - it's something that would be deserving of a loud callout on documentation/readme/articles for this extension so people know.

[bvaughn]

It's not an easter egg 🙂 It's just part of how the new DevTools works, or rather, it's part of what makes the new DevTools work much more efficiently than the existing one. As for documenting features like this- the DevTools beta is a _beta_ so documentation doesn't exist yet (outside of my overview doc). I agree that this behavior is something that we should document as part of the official release though.

I am not a fan of DevTools spamming any console group (log or info) because (a) I think it would be pretty annoying behavior and (b) I don't think it would be an effective way of notifying people.

I will think about ways we can cut down on the noise though. For starters, I think we can skip re-rendering a component if it hasn't committed since the last time it was "inspected" (see https://github.com/bvaughn/react-devtools-experimental/pull/289). This is something I've been meaning to do for a while now anyway.

We could also consider temporarily disabling console logging while re-running the function (although I think that could be pretty alarming) so maybe another option worth considering is providing more React-logging methods that we _could_ temporarily disable (see https://github.com/facebook/react/issues/15726).

[bvaughn]

FWIW @dfagan2, I just deployed a new version with the change from https://github.com/bvaughn/react-devtools-experimental/pull/289. Should significantly cut down on the noise you mentioned.

[bvaughn]

FYI @dfagan2 I have also added a section to the beta DevTools overview explaining the current inspection strategy and considerations:
https://github.com/bvaughn/react-devtools-experimental/blob/master/OVERVIEW.md#inspecting-an-element

[croraf]

Have you accounted that with hooks it is not possible to interactively modify the component's state? Is this fixable? Compare:

vs

[a-x-]

@bvaughn, it's no need to change the api

one dead simple thing to do for react team: create babel-transformation, that will be grab the name of variable, bind it with hook internally and pass to devtools.

I can create a demo

I reported it to the new devtools: https://github.com/bvaughn/react-devtools-experimental/issues/373

[a-x-]

and what not to copy paste react-devtools-experimental solution?

[a-x-]

the point

show hooks name, location, and value (when applicable) in props panel

is marked as complete. but it's wrong as I see. I use latest react and devtools and I don't see any hook names.

[a-x-]

Make sure to include support for memo and forwardRef components

currently React.memo wrapped components frequently shows as but devtools shows some memo-components correctly as

joke is both categories of components are coded similarly as: React.memo(function MyComponent(...) {...})

const DocTitle = React.memo(function DocTitle ({ value, children }) { ...})

const PageStatus = React.memo(
  function PageStatus ({
    ...
  }) { ...  });

[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