Может ли React определить, что хук вложен в условие до его вызова?

Механизм проверки хуков и условие до вызова

React не может определить, что хук потенциально будет вложен в условие до его фактического вызова. Проверка порядка вызовов хуков происходит во время выполнения (runtime), когда React уже начинает рендер компонента и последовательно вызывает каждый хук. Если хук вызывается внутри условия, которое на данном рендере не выполнилось, React просто его не увидит и не учтет в своем подсчете.

Как React отслеживает порядок хуков?

React использует внутренний механизм, основанный на индексах или списке (HooksDispatcher). Во время рендера каждого функционального компонента React записывает вызовы хуков в память в порядке их выполнения. Этот порядок должен быть стабильным между рендерами. Если на следующем рендере хук, который ранее был вызван, оказывается внутри невыполненного условия, его вызов «пропускается». Это нарушает стабильность порядка, так как следующий хук получит индекс, который ранее принадлежал другому хуку, что приводит к некорректному смещению всей цепочки и вызывает ошибки состояния.

// Пример проблемного условия
function ProblematicComponent({ shouldFetch }) {
  // Хук №1 в порядке вызовов
  const [data, setData] = useState(null);

  if (shouldFetch) {
    // Хук №2 в порядке вызовов, но только при shouldFetch === true
    const [loading, setLoading] = useState(false);
  }

  // Хук №3 в порядке вызовов
  const [error, setError] = useState(null);

  // Проблема: если shouldFetch становится false на следующем рендере,
  // хук loading пропускается. Тогда хук error получит индекс,
  // который ранее принадлежал loading, и его состояние будет испорчено.
  return <div>{data}</div>;
}

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

Стабильный порядок хуков — фундаментальное правило React Hooks, потому что:

• Состояние хуков связывается с их индексом вызова. Если useState(0) был первым вызовом в первом рендере, React сохраняет его значение и связывает с индексом 0. На следующем рендере первый вызов хука должен быть тем же useState, чтобы получить корректное состояние.
• Пропуск хука из-за условия сдвигает все последующие индексы. Это приводит к тому, что хуки начинают получать состояния, которые принадлежали другим хукам, вызывая несогласованность данных и потенциальные краши приложения.

Правильный подход: условия внутри хуков

Решение — перемещать логику условия внутрь самого хука или в его результат, а не оборачивать вызов хука в условие.

// Правильное использование: условие внутри эффекта
function CorrectComponent({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    // Условие внутри хука — безопасно
    if (userId) {
      fetchUser(userId).then(setUser);
    }
  }, [userId]);

  return <div>{user?.name}</div>;
}

Как React обнаруживает нарушение?

React проводит проверку во время выполнения через внутренний модуль HooksDispatcher. Он подсчитывает вызовы хуков для каждого компонента и сравнивает их количество и порядок между рендерами. Если обнаруживается несоответствие (например, на предыдущем рендере было 3 вызова хуков, а на текущем — 2), React выбрасывает известную ошибку:

// Ошибка, которую вы увидите в консоли
Warning: React has detected a change in the order of Hooks called by MyComponent. This will lead to bugs and errors if not fixed.

Исключения и продвинутые случаи

Существуют паттерны, которые имитируют условные хуки, но не нарушают правила:

• Компоненты-обертки: Создание отдельного компонента, который вызывает хук, и его условный рендер.
• Пользовательские хуки с внутренней логикой: Условие полностью внутри тела пользовательского хука.

// Пример с компонентом-оберткой
const ConditionalHookWrapper = ({ condition }) => {
  // Хук вызывается всегда, когда компонент рендерится
  const value = useSomeHook();
  return condition ? <div>{value}</div> : null;
};

function ParentComponent() {
  const [show, setShow] = useState(true);
  return (
    <>
      {show && <ConditionalHookWrapper condition={show} />}
      {/* Это безопасно, потому что если ConditionalHookWrapper не рендерится,
          его хук не вызывается вообще, и порядок в ParentComponent не нарушается */}
    </>
  );
}

Заключение

React не обладает способностью статического анализа или предсказания условий до выполнения рендера. Проверка — это runtime-механизм, который ловит нарушения уже после того, как они произошли. Поэтому соблюдение правила «никогда не вызывать хуки внутри условий, циклов или вложенных функций» критически важно для стабильности приложения. Все условные логики должны быть реализованы после вызова хука, внутри его тела (как в useEffect), или через безопасные паттерны, такие как условный рендер целых компонентов.