React-devtools for hooks?

Question

I use the react-devtools Chrome extension. When I set state using hooks (useState) to set an object in state, the actual setting of state seems to work fine. In devtools however, that state object shows that the Hooks > State has content ({...}), it also implies that the content is accessible . When I click on the “expand” (down arrow icon) nothing happens; I cannot view the object’s entries. Am I missing something or do devtools not work with hooks?

Tl:dr How do i use react-devtools to view Hooks state?

Answer 1

I see the same thing, though the issue is only with objects. Primitive values in state seem to show up fine.

It was logged as an issue 3 weeks ago: https://github.com/facebook/react-devtools/issues/1282

I'm surprised it hasn't already been addressed, but I suspect it will be addressed soon now that hooks are released.

I have also seen on Twitter that Brian Vaughn has been working on a rewrite of React devtools:

• https://twitter.com/brian_d_vaughn/status/1093962235116810240
• https://github.com/bvaughn/react-devtools-experimental

but it sounds like it will be a little while yet before that is ready for broad use.

Answer 2

Update with React v16.8

React Hooks are now supported by React DevTools.

• Source: https://reactjs.org/blog/2019/02/06/react-v16.8.0.html