Хуки вызывают только на верхнем уровне компонента или своего хука — не в условиях, циклах и вложенных функциях — и только из React-функций. Причина: React хранит состояние хуков по порядку вызова; если порядок меняется между рендерами, состояние перепутается.
А ещё Линтер eslint-plugin-react-hooks проверяет правила
Так подсказку видит пользователь sotto на живом собеседовании — за пару секунд, пока вы думаете вслух.
Почему порядок. Состояние хуков хранится в списке, привязанном к экземпляру компонента. Первый useState — первая ячейка, второй — вторая. Если один вызов пропустили по условию, все последующие хуки прочитают чужие ячейки.
Свои хуки — основной способ переиспользовать логику с состоянием: useFetch, useLocalStorage, useMediaQuery. Имя с use нужно линтеру, чтобы проверять правила внутри.
sottofunction 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); }sotto слышит вопрос интервьюера и показывает короткий ответ и план, как в блоке «Коротко». Оставьте контакт — пришлём доступ и промокод.