Правила хуков
Вопрос
Почему хуки нельзя вызывать условно?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
хуки хранятся в списке, привязанном к порядку вызова
React сопоставляет вызовы по индексу, а не по имени
пропуск хука сдвигает весь список - состояние приезжает не туда
вызывать можно только на верхнем уровне компонента или своего хука
если первый рендер вернулся раньше хука, состояние молча теряется
правило проверяет линтер react-hooks/rules-of-hooks
Что могут спросить следом
- Что делать, если хук нужен только иногда
- Почему нельзя вызвать хук в обработчике клика
- Как правильно вынести условную логику в кастомный хук
Разбор
React хранит состояние хуков в связанном списке, привязанном к экземпляру
компонента, и сопоставляет вызовы по порядку. Имя переменной не играет роли: третий
вызов useState на этом рендере - это третья ячейка.
Условный вызов сдвигает нумерацию: то, что было состоянием, станет ссылкой, эффект получит чужие зависимости. Иногда React это ловит и бросает ошибку, а иногда - особенно если первый рендер вернулся до хука - просто молча теряет состояние, и баг ищется часами.
Отсюда правило: только верхний уровень компонента или собственного хука, никаких условий,
циклов и вложенных функций. Линтер react-hooks проверяет это статически.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.
Термины по теме
Ещё по теме «Состояние и useState/useReducer»
- Производное значение
- Стабильность dispatch
- Батчинг
- Ленивая инициализация state
- Функциональный апдейтер
- useReducer
- Апдейтер вперемешку со значением
- Ленивая инициализация