> Почему хуки нельзя вызывать внутри условий и как это связано с жизненным циклом React-компонента (React)

Короткий ответ

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

Подробное объяснение

React хранит состояние хуков в виде связного списка, где каждый хук идентифицируется по порядковому номеру вызова внутри компонента. Когда компонент рендерится в первый раз, React запоминает последовательность хуков. При повторных рендерах React ожидает, что хуки будут вызываться в том же порядке. Если хук помещается внутрь условия, его вызов может пропуститься на одном рендере и выполниться на другом. Это нарушает соответствие между сохранённым состоянием и текущим вызовом - React не может определить, какой хук отвечает за какое состояние. В результате возникают ошибки типа "Rendered fewer hooks than expected" или "Rendered more hooks than expected".

Это напрямую связано с жизненным циклом компонента: каждый рендер - это отдельный вызов функции компонента. React не анализирует логику условий, а полагается только на порядок вызовов хуков. Поэтому хуки должны вызываться на верхнем уровне, без вложенности в условия, циклы или обработчики событий. Это правило гарантирует, что порядок хуков остаётся неизменным между рендерами, что необходимо для корректной работы механизма согласования (reconciliation) и сохранения состояния.

На практике

На практике это означает, что все хуки (useState, useEffect, useContext и другие) должны быть объявлены в начале компонента, до любых условных конструкций. Если нужно выполнить эффект или обновить состояние только при определённом условии, это делается внутри самого хука - например, через условие в useEffect или через условное обновление состояния в useState. Для динамического управления хуками используют пользовательские хуки (custom hooks), которые сами следуют правилу порядка вызовов. Также можно разбить компонент на несколько более мелких, где каждый будет иметь свой набор хуков, вызываемых безусловно.

Пример кода

Неправильно (хук внутри условия):

JSX
function MyComponent({ flag }) {
  if (flag) {
    const [value, setValue] = useState(0); // Ошибка!
  }
  return <div />;
}

Правильно (условие внутри хука):

JSX
function MyComponent({ flag }) {
  const [value, setValue] = useState(0);
  
  useEffect(() => {
    if (flag) {
      // логика только при flag = true
    }
  }, [flag]);
  
  return <div />;
}

Как отвечать на собеседовании

Начни с ключевой идеи: порядок вызова хуков неизменен между рендерами. Объясни, что React использует этот порядок для сопоставления состояния, и условные вызовы нарушают это соответствие. Приведи аналогию с массивом или списком, где каждый хук имеет свой индекс. Упомяни, что это правило закреплено в eslint-plugin-react-hooks. Если спросят про жизненный цикл, свяжи с тем, что каждый рендер - это новый вызов функции, и React не анализирует код, а просто считает вызовы хуков. Будь готов показать пример неправильного и правильного кода.

Что проверяет интервьюер

Интервьюер проверяет понимание внутреннего механизма работы хуков в React, а не просто знание правил. Он хочет убедиться, что кандидат осознаёт, почему порядок вызовов критичен для согласования состояния между рендерами. Также проверяется способность применять это знание на практике - например, умение рефакторить код с условными хуками. Это тест на глубину понимания React, а не на запоминание документации.

Типичные ошибки

Кандидаты часто говорят, что "React не позволяет" или "так нельзя", но не могут объяснить причину. Другая ошибка - путать хуки с обычными функциями и пытаться обойти правило через замыкания или динамические вызовы. Некоторые ошибочно полагают, что проблема только в useState, хотя она касается всех хуков. Также встречается мнение, что можно вызывать хуки в циклах, если цикл всегда выполняется одинаковое количество раз - это тоже неверно, так как React не гарантирует стабильность условий между рендерами.