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

Запуск некоторого кода после изменения состояния является распространенным желанием. Давайте посмотрим, как это сделать с помощью хуков.

Метод 1 — хук useEffect

Первым и наиболее часто используемым методом запуска функции после обновления состояния является хук useEffect. useEffect выполняет свою функцию только при изменении элементов в массиве зависимостей. Звучит довольно точно для того, что мы хотим, да? Давайте посмотрим на это в действии:

Довольно просто, каждый раз, когда name изменяется, мы запускаем функцию, которая console.log выводит имя.

Способ 2 — хук useReducer

Если вам нужны более сложные обновления состояния, когда обновление одного элемента состояния влияет на другой элемент состояния, вы можете обратиться к useReducer.

Что, если бы у нас был статус, и мы хотели бы сохранить историю последних 10 статусов? Поскольку история зависит от изменений статуса, useReducer будет хорошим выбором. Давайте посмотрим на это в действии:

tl;dr — если состояние (и код для запуска) простое, вы можете использовать useEffect. Если у вас есть несколько элементов состояния, которые необходимо обновить в зависимости от изменений, используйте useReducer.

Первоначально опубликовано на https://chriscolborne.com.