Какие правила хуков в React и почему их нельзя вызывать в условиях?
- Как написать свой хук?
Хуки вызывают только на верхнем уровне компонента или своего хука — не в условиях, циклах и вложенных функциях — и только из React-функций. Причина: React хранит состояние хуков по порядку вызова; если порядок меняется между рендерами, состояние перепутается.
- Свой хук — функция с именем use..., внутри вызывающая другие хуки
- Свой хук переиспользует логику, а не состояние: у каждого вызова оно своё
- Условие ставят внутри хука или эффекта, а не вокруг вызова
А ещё Линтер eslint-plugin-react-hooks проверяет правила
Подробно
Почему порядок. Состояние хуков хранится в списке, привязанном к экземпляру компонента. Первый useState — первая ячейка, второй — вторая. Если один вызов пропустили по условию, все последующие хуки прочитают чужие ячейки.
Свои хуки — основной способ переиспользовать логику с состоянием: useFetch, useLocalStorage, useMediaQuery. Имя с use нужно линтеру, чтобы проверять правила внутри.
Пример
function useDebouncedValue(value, ms) {
const [debounced, setDebounced] = useState(value);
useEffect(() => {
const t = setTimeout(() => setDebounced(value), ms);
return () => clearTimeout(t);
}, [value, ms]);
return debounced;
}
// ошибка
if (isLoggedIn) { const [x, setX] = useState(0); }Что хотят услышать
- Два правила.
- Почему важен порядок вызовов.
- Свои хуки.
Проверьте себя
Один верный вариант. Подумайте, потом откройте ответ.
Показать варианты и ответ
- ✗Хуки можно вызывать внутри if, если условие стабильно
- ✗Хуки можно вызывать из обычных функций-утилит, если те вызваны из компонента во время рендера
- ✓Только на верхнем уровне компонента или хука: React хранит состояние по порядку вызова
- ✗Порядок вызова хуков не важен
Связанные вопросы
Разбор собеседования с sotto
После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.