Почему хук нельзя обернуть в if?

Почему хук нельзя обернуть в if?

Это один из фундаментальных правил использования хуков в React, и оно напрямую связано с тем, как React управляет состоянием компонента и отслеживает вызовы хуков между рендерами.

Механизм работы хуков и их зависимость от порядка вызова

React внутри себя хранит массив хуков (hooks array) для каждого компонента. Когда компонент рендерится, React последовательно, в том же порядке, в котором они вызываются в коде, обрабатывает каждый хук (например, useState, useEffect). Для каждого хука React записывает его состояние (значение состояния, эффекты, мемоизированные значения) в соответствующую "ячейку" этого внутреннего массива. При следующем рендере React снова проходит по этому массиву в строго том же порядке, чтобы восстановить или обновить состояние для каждого хука.

Если нарушить порядок вызова хуков, например, поместив хук внутрь условного оператора if, который может выполняться или не выполняться в разных рендерах, React "потеряет" соответствие между ячейками своего внутреннего массива и фактическими вызовами в коде. Это приведет к ошибкам.

Рассмотрим практический пример:

function ProblematicComponent({ shouldShow }) {
  // Первый хук в массиве React - это состояние `name`
  const [name, setName] = useState('');

  // Второй хук в массиве React должен быть состоянием `count`...
  // но если условие не выполнится, этот хук не будет вызван!
  if (shouldShow) {
    const [count, setCount] = useState(0);
  }

  // Третий хук - эффект. React ожидает, что после двух хуков состояния будет эффект.
  // Но если `shouldShow` изменится, порядок нарушится.
  useEffect(() => {
    console.log(name);
  }, [name]);

  return <div>{name}</div>;
}

Допустим, при первом рендере shouldShow = true. React создаст внутренний массив хуков для этого компонента:

• Ячейка 0: состояние для name
• Ячейка 1: состояние для count
• Ячейка 2: эффект для console.log

При следующем рендере shouldShow = false. Код компонента выполнится, и хук useState для count не будет вызван. React будет идти по своему внутреннему массиву, ожидая тот же порядок:

• Ячейка 0: состояние для name (совпадает)
• Ячейка 1: React ожидает здесь состояние для count, но поскольку вызова useState нет, он попытается восстановить состояние для того, что фактически вызвано сейчас — а следующим вызовом является useEffect. Это приводит к катастрофической ошибке: React попытается интерпретировать ячейку, предназначенную для состояния, как ячейку для эффекта, что нарушает всю внутреннюю логику. Именно поэтому React выбрасывает ошибку: "Rendered fewer hooks than expected".

Правила хуков (Rules of Hooks)

Это поведение формализовано в Правилах хуков:

1. Хуки следует вызывать только на верхнем уровне функции компонента или собственного хука. Не внутри циклов, условий или вложенных функций.
2. Хуки следует вызывать только из React-функций: функциональных компонентов или других хуков.

Соблюдение этих правил гарантирует, что порядок вызова хуков остается стабильным между рендерами, что является абсолютно необходимым условием для корректной работы React.

Как правильно управлять условной логикой с хуками?

Если вам нужно условно применять логику, связанную с хуком, хук должен вызываться всегда, а условие должно применяться внутри него или с помощью других механизмов.

Пример с useEffect:

function CorrectComponent({ shouldFetch }) {
  const [data, setData] = useState(null);

  // Хук вызывается всегда, но его логика условна
  useEffect(() => {
    if (shouldFetch) {
      fetchData().then(setData);
    }
  }, [shouldFetch]); // Эффект зависит от условия

  return <div>{data}</div>;
}

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

// Решение: разделение на компоненты
function ParentComponent({ shouldShowCounter }) {
  return (
    <div>
      <NameInput />
      {shouldShowCounter && <Counter />}
    </div>
  );
}

function Counter() {
  // Хук теперь всегда вызывается в стабильном порядке внутри своего компонента
  const [count, setCount] = useState(0);
  return <div>{count}</div>;
}

Итог

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