> Какие ограничения есть у React хуков (React)

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

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

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

Основные ограничения React хуков вытекают из их реализации на основе связного списка (linked list) внутри Fiber-дерева. React запоминает порядок вызова хуков для каждого компонента, поэтому нарушение этого порядка приводит к багам. Конкретные ограничения:

1. Правила хуков: хуки можно вызывать только на верхнем уровне React-функции (компонента или кастомного хука). Нельзя внутри условий, циклов, try/catch, колбэков или после раннего return.

2. Отсутствие условного выполнения: нельзя динамически выбирать, какой хук использовать. Например, нельзя сделать if (condition) { useEffect(...) }.

3. Замыкания и stale state: при использовании useState или useEffect внутри колбэков можно получить устаревшее значение, если не указать правильные зависимости.

4. Ограничения useEffect: эффекты выполняются после рендера, что может вызывать проблемы с синхронностью. Также нельзя использовать async функции напрямую.

5. Ограничения useCallback/useMemo: мемоизация не бесплатна - она требует памяти и сравнения зависимостей. Чрезмерное использование может ухудшить производительность.

6. Невозможность использования в классовых компонентах: хуки - это функциональная парадигма, они несовместимы с классами.

7. Отсутствие lifecycle-методов: хуки не предоставляют прямых аналогов componentDidCatch, getSnapshotBeforeUpdate или shouldComponentUpdate.

На практике

На практике эти ограничения проявляются так:

• При рефакторинге классового компонента с хуками нужно полностью переписывать логику, нельзя миксовать подходы.
• При работе с асинхронными операциями в useEffect приходится использовать внутренние функции или паттерны вроде useReducer с экшенами.
• Stale closures особенно опасны в setTimeout, setInterval или event listeners внутри useEffect.
• При условном рендеринге компонентов с хуками нужно следить, чтобы порядок вызова не менялся - лучше использовать ключи (key) для принудительного размонтирования.
• В сложных формах или анимациях часто приходится писать кастомные хуки, чтобы обойти ограничения стандартных.

Пример кода

JSX
// ❌ Ошибка: хук внутри условия
function BadComponent({ flag }) {
  if (flag) {
    const [state, setState] = useState(0); // Нарушение правил хуков
  }
  return <div />;
}

// ✅ Правильно: хук на верхнем уровне
function GoodComponent({ flag }) {
  const [state, setState] = useState(0);
  
  useEffect(() => {
    if (flag) {
      setState(1);
    }
  }, [flag]);
  
  return <div>{state}</div>;
}

// ❌ Stale closure
function StaleClosure() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    const timer = setInterval(() => {
      setCount(count + 1); // Всегда использует count = 0
    }, 1000);
    return () => clearInterval(timer);
  }, []); // Пустой массив зависимостей
  
  return <div>{count}</div>;
}

// ✅ Исправление с функциональным обновлением
function FixedClosure() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    const timer = setInterval(() => {
      setCount(prev => prev + 1); // Используем функциональную форму
    }, 1000);
    return () => clearInterval(timer);
  }, []);
  
  return <div>{count}</div>;
}

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

Начни с ключевого ограничения - правила хуков и их причина (связный список в Fiber). Затем перечисли основные ограничения, но не зачитывай список - объясни логику каждого. Приведи пример из практики, когда ты сталкивался с ограничением и как его обошёл. Упомяни trade-off: хуки упрощают код, но требуют дисциплины. Если спросят про альтернативы - скажи про кастомные хуки, useReducer, библиотеки вроде Zustand или Jotai. Не критикуй хуки - покажи понимание их устройства.

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

• Понимание внутреннего устройства React (Fiber, связный список хуков).
• Знание правил хуков и умение их объяснить не как "так сказано в документации", а с точки зрения реализации.
• Практический опыт: сталкивался ли кандидат с багами из-за ограничений и как их решал.
• Умение видеть trade-off: понимание, что хуки - это компромисс между простотой и гибкостью.
• Глубина: может ли кандидат объяснить, почему нельзя вызывать хуки в условиях, а не просто заучить правило.

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

• Заучивание правил без понимания: кандидат говорит "нельзя вызывать в условиях", но не может объяснить, почему.
• Игнорирование stale closures: не упоминает проблему замыканий или не знает, как её решить.
• Чрезмерная критика: говорит, что хуки "плохие" или "сломанные", вместо того чтобы показать понимание их ограничений.
• Путаница между хуками и HOC/render-props: не понимает, что хуки решают те же задачи, но иначе.
• Незнание альтернатив: не может предложить обходные пути (кастомные хуки, useReducer, библиотеки).
• Упрощение: сводит ответ к "нельзя в циклах и условиях", не упоминая другие ограничения.