How to get hook state in console?

[noah79]

I am trying to interactively examine data I'm receiving from an apollo query via a hook but I cannot access it via $r.

With an HOC I'd be able to directly see the prop in the console, write filters against it to track down needles in haystacks as I'm debugging, etc.

A way to get to this from the console would be greatly appreciated. Additionally, it would be nice to be able to somehow get a reference for the hook under my mouse - something like $r.hooks.thing.deep.path.

I am absolutely loving hooks in react and have been using it for all new development within my company (top Fashion PLM software company). React is far and away the best ecosystem I have ever encountered for general application development.

[bvaughn]

For some background information, check out the "hooks" section of the overview: https://github.com/bvaughn/react-devtools-experimental/blob/master/OVERVIEW.md#inspecting-hooks

The tl;dr is that "inspecting" hooks requires DevTools to re-render a function component. We are very careful to do this as little as possible since it can lead to a confusing debugging experience.

We could re-render for $r as well but the naive implementation of that would double the number of re-renders in the simple case, and a less native implementation would add complexity to the renderer's current inspected-value-caching which I'm reluctant to do. (The reason for this is that the code that assigns $r and the code that fetches and displays values in the right-hand panel is pretty separate.)

[noah79]

First, thank you so much for the many projects you've contributed to the community. I use the fruits of your labor daily to do my job and the new dev-tools + hooks in general have been a massive boon to me as a developer.

Back to how to get a console reference to the thing I'm looking at in the dev-tools GUI:

You seem to have a pointer to the last value the hook returned so that you can render it in the GUI as I expand the tree. Could the tree support node focusing so that it has the concept of a selected item and then bind some new magic variable ($h or $d perhaps) to give me the contents of said item? It would be supremely helpful for examining data returned from hooks - which are often API calls that are data dense.

[bvaughn]

Thanks for the kind words.

You seem to have a pointer to the last value the hook returned so that you can render it in the GUI as I expand the tree.

Not quite. DevTools re-renders the currently selected component to inspect hook values.

https://github.com/bvaughn/react-devtools-experimental/blob/050cb8452d7255057cd7d73f31e636249a32928b/src/devtools/views/Components/InspectedElementContext.js#L232-L238

https://github.com/bvaughn/react-devtools-experimental/blob/050cb8452d7255057cd7d73f31e636249a32928b/src/backend/renderer.js#L2113-L2276

As explained here, this is the core of how it obtains hook values: https://github.com/bvaughn/react-devtools-experimental/blob/master/src/backend/ReactDebugHooks.js

Could the tree support node focusing so that it has the concept of a selected item and then bind some new magic variable ($h or $d perhaps) to give me the contents of said item?

It already does this. That's how the $r variable works.

https://github.com/bvaughn/react-devtools-experimental/blob/050cb8452d7255057cd7d73f31e636249a32928b/src/devtools/views/Components/InspectedElementContext.js#L244-L247

https://github.com/bvaughn/react-devtools-experimental/blob/62e5fd57a15295fe269dc998350005aaa4042ed9/src/backend/renderer.js#L1991-L2032

There are a couple of async actions related to this, and a caching aspect as well. Maybe we could look at combining the inspect and select actions so that any time the inspect method would send a full response, it also updates the $r value. Off the top of my head, that seems maybe promising...

[bvaughn]

I'm going to look into the inspect/select merging. If that seems doable, then we'll just do it that way. If it doesn't, then I'll probably close this as a "won't fix" for now- because I don't want to complicate the caching.

Stay tuned~

[bvaughn]

I think #364 is probably as close as this will get (at least for the current time).

A way to get to this from the console would be greatly appreciated. Additionally, it would be nice to be able to somehow get a reference for the hook under my mouse - something like $r.hooks.thing.deep.path.

Given the nature of hooks, I'm not sure this part of the issue makes sense. (What is thing.deep.path? Would would the individual pieces be?)

Check out issue #323 for an example on the complexity of surfacing hooks data in DevTools.