How to track React hooks?

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>
  );
}

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

See the attached image:

You can inspect React.useState with react-debug-hooks and Redux DevTools

inspect preview

  const [state, setState] = React.useState({
    loading: false,
    users: [],
    error: null
  }, 'users')  // you need to set a second parameter 'string' that will be shown on Redux devTools.