Хуки Реакта: что, зачем и как

Что:
Хуки - это новое АПИ для модных функциональных пацанов (с), которое позволяет отказаться от компонентов-классов. Преимуществом классов была возможность использовать локальное состояние, но с хуками добавлять state можно и в функциональны компоненты. Не путать с хуками жизненного цикла!

Зачем:
1. Переиспользуемость. В классических компонентах для разделения состояния использовали, например, компоненты-обертки. С хуками все проще: пишем логику функциями в отдельном файле, импортируем, вызываем. Всё.
2. Простота. Официальный туториал утверждает: для Реакт-разработчков сложно усвоить правила работы this в JS. Мои соболезнования компаниям, где работают такие девелоперы. Тем не менее, возня с привязкой this сократилась с упрощенной до отсутствующей.

Как:
Все просто. Создаем через деструктуризацию пользовательнкую переменную и метод обновления:

const [age, setAge] = useState(42);

...И применяем, как ранее в классах. О тонкостях, типа useEffect, позже.

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

#React #хуки

Хуки Реакта-2: useEffect

Герой заголовка - useEffect - так называемый хук эффекта. Под эффектом понимают действия, которые в компонентах-классах выполняются в методах жизненного цикла.

Собственно эффект - это функция, которую и цепляет на себя хук.

Хук эффекта объединяет возможности методов жизненного цикла: componentDidMount, componentDidUpdate, componentWillUnount. Это поможет объединить похожую логику, разбитую в классах по методам жизненного цикла.

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

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

Однако такое поведение может замедлить приложение. Чтобы отключить его, нужно передать хуку вторым аргументом массив со значением, которое может измениться при обновлении:

useEffect(() => {
document.title = `Вы нажали ${count} раз`;
}, [count]);

В этом случае эффект будет вызван, только если значение count изменится.

useEffect можно использовать многократно в одном компоненте. Это позволит, например, разбить эффекты на те, что должны выполняться всегда, и те, что выполняются только при изменении значения.

#React #хуки