Какие ограничения есть у React хуков

Что проверяют

Знаете ли вы правила хуков и понимаете ли, почему они именно такие.

Как отвечать

Правил два:

• вызывать только на верхнем уровне: не внутри условий, циклов и вложенных функций;
• вызывать только из компонентов и своих хуков, не из обычных функций.

Причина первого правила техническая: React не знает имён хуков, он сопоставляет их состояние по порядку вызова. Внутри компонента хранится список, и на каждом рендере хуки сопоставляются по индексу. Пропустили вызов из-за условия, и всё состояние сдвинулось: useState вернёт значение чужого хука.

if (isOpen) {
  const [x, setX] = useState(0);   // порядок поедет на следующем рендере
}

Правильное решение это не условный вызов хука, а условие внутри него, либо вынос части в отдельный компонент.

Причина второго правила: хуку нужен текущий рендерящийся компонент, а вне рендера его нет.

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

Проверяет всё это плагин eslint-plugin-react-hooks, и подавлять его предупреждения почти всегда означает прятать настоящую ошибку.

Где спотыкаются

Вызывают хук после раннего возврата.

Пишут useEffect(async () => ...).

Отключают правило про зависимости комментарием.

Не могут объяснить, почему порядок вызова важен.