> Какие уязвимости или баги известны у React хука useEffect и как получить неожиданное поведение (React)

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

Основные уязвимости useEffect связаны с неправильным управлением зависимостями, что приводит к бесконечным циклам, утечкам памяти, race conditions и stale closures. Неожиданное поведение возникает при пропуске зависимостей, неправильной очистке эффектов, использовании async функций напрямую и игнорировании правил React Strict Mode. Особенно опасно это в сценариях с подписками, таймерами и асинхронными запросами.

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

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

Stale closures возникают, когда эффект захватывает устаревшее значение переменной из замыкания. Это происходит, если переменная не указана в массиве зависимостей, но используется внутри эффекта. React не пересоздаёт эффект при изменении такой переменной, и callback продолжает ссылаться на старое значение.

Race conditions - классическая проблема асинхронных операций. Если useEffect запускает fetch, а компонент размонтируется или dependency меняется до завершения запроса, ответ может прийти уже для неактуального состояния. Без корректной обработки это приводит к установке состояния на размонтированный компонент или к отображению неверных данных.

Бесконечные циклы возникают, когда эффект изменяет состояние, которое указано в его зависимостях. React запускает эффект → меняется состояние → эффект запускается снова. Особенно коварно это с объектами и массивами, которые при каждом рендере создаются заново, даже если их содержимое не изменилось.

Утечки памяти происходят, когда эффект создаёт подписки, таймеры или слушатели событий, но функция очистки не вызывается или написана некорректно. В React 18 Strict Mode усугубляет это, так как монтирует/размонтирует компонент дважды в dev-режиме.

Проблемы с async/await - передача async функции напрямую в useEffect запрещена документацией, но разработчики часто игнорируют это. Async функция возвращает Promise, а useEffect ожидает либо undefined, либо функцию очистки. Promise не является функцией очистки, что приводит к неопределённому поведению.

Неожиданное поведение в Strict Mode - React 18 умышленно вызывает эффект дважды (mount → unmount → mount) для выявления проблем с очисткой. Если разработчик не ожидает этого, он может увидеть дублирование запросов или двойное создание подписок.

На практике

На реальных проектах самые частые проблемы:

1. Забытые зависимости - eslint-plugin-react-hooks часто спасает, но не всегда. Например, если в эффекте используется функция из props, но она нестабильна (создаётся каждый рендер), эффект будет перезапускаться бесконечно.

2. Объекты и массивы в зависимостях - { a: 1 } !== { a: 1 } в JavaScript. Если передать объект как dependency, эффект будет запускаться на каждый рендер. Решение - использовать примитивы или useMemo.

3. Сложные цепочки эффектов - useEffect, который зависит от другого useEffect, который зависит от первого. Это создаёт каскад перерендеров, который трудно отлаживать.

4. Игнорирование функции очистки - особенно опасно для WebSocket соединений, EventSource, IntersectionObserver. Если не отписываться, соединения накапливаются.

5. setInterval без очистки - классика. Если не очищать интервал, он продолжает работать даже после размонтирования компонента, вызывая setState на unmounted компоненте.

Пример кода

JSX
// Проблема: stale closure
function Counter() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    const timer = setInterval(() => {
      // Всегда будет 0, так как count захвачен при первом рендере
      setCount(count + 1);
    }, 1000);
    return () => clearInterval(timer);
  }, []); // count не в зависимостях
  
  return <div>{count}</div>;
}

// Решение: функциональная форма setState
useEffect(() => {
  const timer = setInterval(() => {
    setCount(prev => prev + 1);
  }, 1000);
  return () => clearInterval(timer);
}, []);

// Проблема: race condition
function SearchResults({ query }) {
  const [results, setResults] = useState([]);
  
  useEffect(() => {
    let cancelled = false;
    fetch(`/api/search?q=${query}`)
      .then(res => res.json())
      .then(data => {
        if (!cancelled) setResults(data);
      });
    return () => { cancelled = true; };
  }, [query]);
  
  return <Results data={results} />;
}

// Проблема: async функция напрямую
useEffect(async () => {
  const data = await fetchData();
  setData(data);
}, []); // ❌ возвращает Promise, не функцию очистки

// Правильно: обёртка
useEffect(() => {
  const fetchData = async () => {
    const data = await fetchData();
    setData(data);
  };
  fetchData();
}, []);

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

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

Упомяни, что многие проблемы решаются правилами линтера, но не все - например, race conditions требуют ручной обработки. Покажи знание современных подходов: useCallback для стабилизации функций, useMemo для объектов, функциональная форма setState.

Хорошо упомянуть React 18 Strict Mode и его влияние на эффекты - это покажет, что ты следишь за изменениями в экосистеме.

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

• Понимание механизма замыканий в JavaScript и как они работают в контексте React
• Знание жизненного цикла эффекта: mount, update, unmount
• Умение проектировать корректную очистку ресурсов
• Понимание асинхронности и race conditions
• Знание правил hooks и их обоснования
• Способность предвидеть неочевидные баги до их возникновения

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

• Утверждение, что пустой массив зависимостей [] - это всегда правильно
• Игнорирование функции очистки для асинхронных операций
• Использование async функций как callback useEffect
• Помещение объектов/массивов в зависимости без стабилизации
• Забывание, что setState в useEffect может вызвать лишний рендер
• Предложение использовать useEffect для синхронизации состояний (лучше lifting state up или useReducer)