How to track React hooks?

Question

Before working on a new React project, I want to be sure that there are (or will be), good developer tools to support it.

One of the things I like with React is the React Developer tool for Google Chrome. It lets me inspect the internal state for each component.

The question: Does the React Developer tool show the hooks state of a React component?

If not, how can I inspect the internal hooks state (Aka effect), outside of the React component?

Answer 1

Short answer is no, React Devtool doesn't exactly show the hooks state of components the way you want it to. You could track the progress of its implementation here.

The long answer is yes, the React Devtool technically does show state for hooks, but not in a user-friendly format that you are used to. The state is being shown in its raw implementation form, which resembles a linked list:

{
  baseState: ...,
  baseUpdate: ...,
  memoizedState: ...,
  next: {
    baseState: ...,
    baseUpdate: ...,
    memoizedState: ...,
    next: ..., // The list goes on
    queue: ...,
  },
  queue: ...
}

For a simple component with two states, the Devtool shows state as an object with baseState field as the first state value of 'Mary' and there's a next field which points to another state object which corresponds to the second state value, and it has the baseState value of 10.

function App() {
  const [name, setName] = useState('Mary');
  const [age, setAge] = useState(10);

  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
}

Answer 2

Today, the Chrome Developers React toolbar is able to show the state of hooks.

See the attached image: