Hooks support in react dev tools?

reactjs react-hooks react-devtools
cbdeveloper picture cbdeveloper · Mar 13, 2019 · Viewed 7.8k times · Source

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

Answer

cbdeveloper picture cbdeveloper · Mar 14, 2019

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

Related questions

How to fix missing dependency warning when using useEffect React Hook?

With React 16.8.6 (it was good on previous version 16.8.3), I get this error when I attempt to prevent an infinite loop on a fetch request ./src/components/BusinessesList.js Line 51: React Hook useEffect has a missing dependency: 'fetchBusinesses'. Either include it …

Read More
What is useState() in React?

I am currently learning hooks concept in React and trying to understand below example. import { useState } from 'react'; function Example() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); return ( <div> <p>…

Read More
How to use componentWillMount() in React Hooks?

In the official docs of React it mentions - If you’re familiar with React class lifecycle methods, you can think of useEffect Hook as componentDidMount, componentDidUpdate, and componentWillUnmount combined. My question is - how can we use the componentWillMount() …

Read More