> Почему нужно соблюдать порядок вызова хуков в React? (React)

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

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

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

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

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

Дополнительно, порядок важен для работы с эффектами и мемоизацией: useEffect, useMemo, useCallback также привязаны к позиции вызова. Нарушение порядка ломает их зависимость от предыдущего рендера.

На практике

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

JSX
if (condition) {
  useEffect(...)
}

Вместо этого условие переносится внутрь хука или используется условный рендеринг компонентов. Для динамического количества хуков (например, список полей формы) применяются массивы и кастомные хуки, которые гарантируют стабильный порядок.

Пример кода

JSX
// ❌ Ошибка: хук в условии
function BadComponent({ visible }) {
  if (visible) {
    useEffect(() => { /* ... */ }, []);
  }
  // ...
}

// ✅ Правильно: условие внутри хука
function GoodComponent({ visible }) {
  useEffect(() => {
    if (visible) {
      // логика
    }
  }, [visible]);
  // ...
}

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

Начни с объяснения, что React использует порядок вызова как ключ для связывания состояния. Упомяни связный список или массив хуков внутри fiber node. Приведи конкретный пример проблемы: если хук пропущен на одном рендере, React ошибочно свяжет следующий хук с предыдущим состоянием. Заверши практическим советом: все хуки - на верхнем уровне, без условий и циклов.

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

Интервьюер проверяет понимание внутреннего механизма React: как хранятся хуки, почему порядок критичен, и какие последствия возникают при его нарушении. Также оценивается способность объяснить абстрактную концепцию через конкретные примеры и знание best practices.

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

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