> Можно ли условно вызывать хуки в React при разных рендерах (React)

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

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

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

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

На практике

На практике это означает, что все хуки (useState, useEffect, useContext, useMemo, useCallback, useRef и кастомные) должны быть вызваны на верхнем уровне компонента, до любых условных конструкций, циклов или ранних возвратов. Если нужно применить логику условно, используй условные выражения внутри самого хука (например, передай условие в useEffect) или вынеси условную часть в отдельный компонент, который будет монтироваться/размонтироваться по условию. Это гарантирует стабильный порядок вызовов и предсказуемое поведение.

Пример кода

JSX
// ❌ Неправильно: условный вызов хука
function UserProfile({ userId }) {
  if (userId) {
    const [user, setUser] = useState(null); // нарушение правил хуков
  }
  // ...
}

// ✅ Правильно: хук всегда вызывается, условие внутри
function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  
  useEffect(() => {
    if (userId) {
      fetchUser(userId).then(setUser);
    }
  }, [userId]);
  // ...
}

// ✅ Альтернатива: вынести условную часть в отдельный компонент
function UserProfile({ userId }) {
  return userId ? <UserData userId={userId} /> : null;
}

function UserData({ userId }) {
  const [user, setUser] = useState(null);
  // хуки вызываются всегда в одном порядке
}

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

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

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

Интервьюер проверяет понимание внутреннего механизма работы хуков в React, знание правил хуков и умение применять их на практике. Также оценивается способность объяснить, почему это ограничение существует, а не просто заучить правило. Важно показать, что ты понимаешь связь между порядком вызовов и хранением состояния в fiber tree. Дополнительно проверяется умение предлагать корректные альтернативы (условие внутри хука, вынос в компонент).

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

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