17

I read in the React Docs that:

React Hooks are now supported by React DevTools. They are also supported in the latest Flow and TypeScript definitions for React. We strongly recommend enabling a new lint rule called eslint-plugin-react-hooks to enforce best practices with Hooks. It will soon be included into Create React App by default.

Then I updated React to 16.8 and started using hooks. But after doing useState() and useContext() in my first component, I couldn't properly inspect them using React Dev Tools (see picture below).

Is there a way around this?

  const [loading, setLoading] = useState(false);
  const [error,setError] = useState(null);
  const [productDetails,setProductDetails] = useState(null);

  const firebase = useContext(FirebaseContext);

enter image description here

cbdeveloper
  • 27,898
  • 37
  • 155
  • 336
  • Did you upgrade React's devtools extension? – Joru Mar 13 '19 at 17:39
  • I've got the 3.6.0 which seems to be the latest. Is yours working as intended? – cbdeveloper Mar 13 '19 at 17:41
  • 1
    Looking at your screenshot again it looks like the hooks state is showing up correctly, what seems to be missing? It's pretty basic at the moment, but this issue is tracking further features that would make it nicer to use: https://github.com/facebook/react-devtools/issues/1215. – Joru Mar 13 '19 at 18:07
  • But state variable names and context values are not showing. How can I be sure which one I'm looking at if I have 5 boolean state variables? Thanks. It seems that a new version of the React DevTools is coming. No release date yet, though. On Twitter, Dan Abramov advised to use [this one](https://twitter.com/dan_abramov/status/1106006760421240833) until then – cbdeveloper Mar 14 '19 at 09:54
  • 1
    Regarding order - I think they will be ordered in the order that `useState` was called in your component. – Joru Mar 14 '19 at 16:59

1 Answers1

6

UPDATE December 2019

React Dev Tools v4 with Hooks Support has been released.

React Dev Tools - Chrome

React Dev Tools - Firefox

ORIGINAL ANSWER

The new version of the React DevTools might have already been release and that's what you should be using.

But until then, what you can use is:

https://react-devtools-experimental-chrome.now.sh/

Got this answer from one of Dan Abramov's tweets

cbdeveloper
  • 27,898
  • 37
  • 155
  • 336
  • 1
    if anyone else finds this and has trouble getting it to work (windows users) you need to use a zip program like 7-zip to extract the files from the .crx file into a folder then in the chrome extensions screen in developer mode click "load unpacked" and select that folder. – lupos Apr 24 '19 at 16:23