Как отслеживать хуки React?

Короткий ответ: нет, React Devtool точно не показывает состояние хуков компонентов так, как вы хотите. Вы могли отслеживать прогресс его реализации здесь.

Длинный ответ - да, React Devtool технически показывает состояние хуков, но не в удобном для пользователя формате, к которому вы привыкли. Состояние отображается в необработанной форме реализации, которая напоминает связанный список:

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

Для простого компонента с двумя состояниями Devtool показывает состояние как объект с полем baseState в качестве первого значения состояния 'Mary', и есть поле next, которое указывает на другой объект состояния, который соответствует второму значению состояния, и имеет значение baseState. из 10.

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

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

Сегодня Панель инструментов Chrome Developers React умеет показывать состояние хуков.

Смотрите прикрепленное изображение:

Вы можете проверить React.useState с помощью реагировать-отладочные хуки и Redux DevИнструменты

осмотреть предварительный просмотр

  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.