Можно ли вызвать хук внутри условия?

Можно ли вызывать хук React внутри условия?

Нет, вызывать хуки React (например, useState, useEffect, useCallback и другие) внутри условий, циклов или обычных функций строго запрещено. Это одно из фундаментальных правил использования хуков, которое гарантирует стабильность работы приложения и предотвращает множество ошибок.

Почему это правило существует?

React зависит от последовательности и неизменности вызовов хуков между рендерами одного компонента. Когда компонент рендерится, React «запоминает», какие хуки были вызваны и в каком порядке. Это позволяет системе корректно сопоставлять состояние, эффекты и другие данные между повторными рендерами.

Конкретные причины запрета:

1. Потеря состояния хука. Если вызов хука зависит от условия, которое может меняться между рендерами, React может «потерять» состояние этого хука. Например:

   if (condition) {
     const [state, setState] = useState(0); // Хук вызван только при первом рендере
   }
   // При следующем рендере condition = false, хук не вызывается.
   // React ожидает второй вызов useState, но получает первый вызов другого хука.
   // Это приводит к ошибке: "Rendered more hooks than during the previous render".
   

2. Сломанная связь между рендерами. React внутренне использует массив для хранения данных хуков для каждого компонента. Порядок вызовов должен оставаться идентичным при каждом рендере. Изменение порядка нарушает эту связь.

3. Невозможность корректной работы эффектов. Для useEffect и useMemo порядок и количество вызовов критически важны для правильного выполнения очистки (cleanup) или вычисления мемоизированных значений.

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

Существует несколько правильных паттернов для реализации условной логики с использованием хуков.

1. Условие внутри хука

Логику условия можно размещать внутри тела хука, а не вокруг его вызова. Это особенно актуально для useEffect.

function MyComponent({ userId }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Условие внутри эффекта - допустимо!
    if (userId) {
      fetch(`/api/user/${userId}`)
        .then(response => response.json())
        .then(setData);
    }
  }, [userId]); // userId в зависимостях

  return <div>{data ? data.name : 'Loading...'}</div>;
}

2. Разделение компонента или использование нескольких хуков

Если логика требует наличия или отсутствия целого хука, лучше разделить компонент или использовать несколько хуков условно.

• Разделение на два компонента:

  function ComponentWithHook() {
    const [state, setState] = useState(0);
    return <ChildComponent state={state} setState={setState} />;
  }
  
  function ComponentWithoutHook() {
    return <ChildComponent />;
  }
  
  function ParentComponent({ condition }) {
    return condition ? <ComponentWithHook /> : <ComponentWithoutHook />;
  }
  

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

  function MyComponent({ shouldTrack }) {
    // Хук всегда вызывается!
    const [position, setPosition] = useState({ x: 0, y: 0 });
  
    useEffect(() => {
      // Эффект работает условно
      if (shouldTrack) {
        const handleMove = (e) => setPosition({ x: e.clientX, y: e.clientY });
        window.addEventListener('mousemove', handleMove);
        return () => window.removeEventListener('mousemove', handleMove);
      }
    }, [shouldTrack]);
  
    return <div>Position: {shouldTrack ? `${position.x}, ${position.y}` : 'Not tracking'}</div>;
  }
  

3. Правильное условное рендеринг дочерних компонентов с хуками

Если вам нужно условно показать компонент, который внутри себя использует хуки, это допустимо. Главное правило касается только вызова хуков в теле текущего функционального компонента.

function Parent() {
  const [isVisible, setIsVisible] = useState(true);

  return (
    <div>
      {/* Условный рендеринг компонента с хуками - допустимо! */}
      {isVisible && <ChildComponentWithHooks />}
      <button onClick={() => setIsVisible(!isVisible)}>Toggle</button>
    </div>
  );
}

Что произойдет при нарушении правила?

React выдаст четкую ошибку во время разработки (в режиме development):

React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render.

или

Rendered more hooks than during the previous render.

Эта ошибка помогает быстро обнаружить проблему и исправить архитектуру компонента.

Итог

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