Почему нельзя вкладывать в UseEffect в условные выражения?

Почему нельзя вкладывать вызов хука useEffect в условные выражения?

Основная причина: Правила хуков React

React Hooks Rules — это фундаментальные требования, которые React накладывает на использование хуков. Хук useEffect, как и все хуки, должен вызываться безусловно на верхнем уровне функционального компонента. Это правило существует по нескольким ключевым причинам:

1. Гарантия стабильного порядка вызова хуков

React полагается на последовательный порядок вызова хуков между рендерами. При каждом рендере React "видит" массив вызовов хуков и связывает их с внутренним состоянием компонента по индексу.

// ❌ НЕПРАВИЛЬНО — хук внутри условия
function MyComponent({ shouldFetch }) {
  if (shouldFetch) {
    useEffect(() => {
      fetchData();
    }, []);
  }
  // ...
}

// ✅ ПРАВИЛЬНО — хук всегда вызывается
function MyComponent({ shouldFetch }) {
  useEffect(() => {
    if (shouldFetch) {
      fetchData();
    }
  }, [shouldFetch]);
}

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

2. Принцип работы внутренней реализации React

React хранит состояние хуков в связном списке (linked list), где каждый хук занимает определенную позицию. При рендере React проходит по этому списку и обновляет соответствующие значения. Если порядок меняется, система "ломается".

// При первом рендере (shouldFetch = true):
// 1. useState (count)
// 2. useEffect (fetch)

// При втором рендере (shouldFetch = false):
// 1. useState (count)
// ⚠️ useEffect отсутствует — порядок сбит!

3. Статический анализ и linting

Правило хуков на верхнем уровне позволяет инструментам вроде eslint-plugin-react-hooks статически анализировать код и находить потенциальные проблемы на этапе разработки. Это значительно улучшает Developer Experience и предотвращает скрытые баги.

Как правильно работать с условными эффектами?

Способ 1: Условие внутри useEffect

Наиболее распространенный подход — выносить условие внутрь эффекта:

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  
  useEffect(() => {
    // Условие внутри эффекта
    if (userId) {
      fetchUser(userId).then(setUser);
    }
  }, [userId]); // Зависимость в массиве deps
  
  return <div>{user?.name}</div>;
}

Способ 2: Пропуск эффекта с помощью зависимостей

Можно контролировать выполнение эффекта через массив зависимостей:

useEffect(() => {
  // Этот эффект выполнится только когда isActive === true
  const interval = setInterval(() => {
    updateData();
  }, 1000);
  
  return () => clearInterval(interval);
}, [isActive]); // Эффект "перезапускается" при изменении isActive

Способ 3: Кастомные хуки с условной логикой

Создание кастомного хука, который инкапсулирует условную логику:

function useConditionalEffect(condition, effect, dependencies) {
  useEffect(() => {
    if (condition) {
      return effect();
    }
  }, dependencies);
}

// Использование
function MyComponent({ isEnabled }) {
  useConditionalEffect(
    isEnabled,
    () => {
      console.log('Эффект выполняется только если isEnabled = true');
    },
    [isEnabled]
  );
}

Исключения и пограничные случая

1. Условные хуки внутри других хуков — это допустимо, так как кастомные хуки сами должны соблюдать правила хуков
2. Условные хуки в разных компонентах — разные компоненты имеют независимые состояния хуков

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

Нарушение этого правила приводит к:

• Несогласованному состоянию компонента
• Утечкам памяти (некорректные очистки эффектов)
• Трудным для отладки ошибкам, которые могут проявляться не сразу
• Непредсказуемому поведению при ре-рендерах

Практический пример проблемы

function BuggyComponent({ mode }) {
  const [data, setData] = useState([]);
  
  // 🚨 ОПАСНО: хук вызывается условно
  if (mode === 'advanced') {
    useEffect(() => {
      // Этот эффект может "потеряться" при смене mode
      setupAdvancedFeatures();
    }, []);
  }
  
  // При переходе из 'advanced' в 'simple' 
  // React ожидает здесь хук, но его нет!
  const [count, setCount] = useState(0);
  
  return <div>{data.length}</div>;
}

Вывод

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