React-хуки проверяют, какое изменение состояния вызвало повторную визуализацию

Question

Теперь с хуками, я разделил состояние компонента на более миниатюрные состояния.Это казалось лучше, пока я не хотел выяснить, какое изменение состояния вызвало конкретный повторный рендеринг.

Как легко узнать, какое изменение состояния вызвало конкретный повторный рендеринг?

Answer 1

Если обновления состояния необходимо отслеживать для управления состоянием, например, для доступа к предыдущим значениям состояния, это следует явно обрабатывать с помощью пользовательских перехватчиков, которые обертывают useState.

Что касается отладки, инструменты React dev в настоящее время не используются.предлагать эту функциональность, хотя эта информация может быть доступна через недокументированный API рендерера, используемый в инструментах разработки.

Можно добавить точку останова внутри функции React dispatchAction и пройти через стек вызовов, чтобы узнатькакой установщик состояния был вызван:

Или вместо useState можно использовать пользовательский хук для отслеживания обновлений состояния:

const useDebuggableState = initialState => {
  const [state, setState] = useState(initialState);

  useMemo(() => {
    'a line to add breakpoint';
  }, [state]);

  return [state, setState];
};