Обязательноreact

Порядок и область вызова React Hooks

useState, useEffect и другие обычные React Hooks вызывай на верхнем уровне функционального компонента или custom Hook, до условных return.

Опубликовано 13 ноября 2026 г.Проверено 13 ноября 2026 г.Изменено 13 ноября 2026 г.

Скачать Markdown Предложить изменение на GitHub Предложить правку

Плохо

import { useState } from 'react';
export function Counter({ enabled }) {
  if (!enabled) return null;
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Хорошо

import { useState } from 'react';
export function Counter({ enabled }) {
  const [count, setCount] = useState(0);
  if (!enabled) return null;
  return <button onClick={() => setCount(value => value + 1)}>{count}</button>;
}

Почему это важно

React связывает обычные Hooks с порядком вызова; скрытый пропуск нарушает связь состояния и render. Cleanup и зависимости обеспечивают корректную синхронизацию с внешней системой.

Когда применять

Для React Hooks в поддерживаемой версии. Проверены текущие React docs (19.x); исключение API use нельзя переносить на useState/useEffect. В Next.js соответствующие state/effect hooks требуют Client Component; не каждый файл с именем useSomething является серверно совместимым.

Подробные условия

Не помещай их в цикл, условие, callback, обработчик события или обычный helper. Custom Hook использует имя use + заглавная буква и действительно вызывает Hooks; добавлять use к обычной функции ради стиля не нужно.

Для Effect перечисляй реактивные зависимости и возвращай cleanup подписки/ресурса, когда он нужен. Не подавляй проверку зависимостей для маскировки устаревшего замыкания. API use в React 19+ имеет отдельное исключение: его можно вызывать в условии/цикле, но сохраняются его собственные ограничения, включая React-контекст вызова и запрет try/catch вокруг use.

Кто что делает

Человек

Определяет нужную внешнюю синхронизацию и lifecycle ресурса.

AI-агент

Проверяет порядок и зависимости Hooks, различает специальный use и обычные Hooks, не создает эффект для производного значения.

Как проверить у себя

enabled true → false → true → render → порядок Hooks сохраняется и состояние не повреждено.
Hook вызван из event handler/после условного return → lint/review → нарушение выявлено.
Effect переподписывается или компонент размонтирован → проверить → предыдущий ресурс освобожден; API use проверен по своим правилам.

Первоисточники

React: Rules of Hooks — Call order and React function boundaries.
React: use — Calling use in loops and conditions; restrictions.
React: useEffect — Dependencies, cleanup and race conditions in data fetching.

История изменений на GitHub

Дата проверки отражает содержательную сверку. Синхронизация сайта не обновляет её автоматически.