Что можно использовать в useEffect?

Что можно использовать внутри хука useEffect?

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

1. Основное предназначение: побочные эффекты

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

• Запросы к API (fetch, axios, etc.)
• Работу с DOM напрямую (изменение элементов, подписка на события)
• Таймеры (setTimeout, setInterval)
• Подписки на внешние данные (WebSockets, Firebase, сторонние библиотеки)
• Логирование (отправка аналитики, логи)
• Синхронизация с внешними системами (например, обновление document.title)

Пример с запросом данных:

useEffect(() => {
  // Асинхронный побочный эффект
  const fetchData = async () => {
    const response = await fetch('/api/data');
    const data = await response.json();
    setData(data);
  };
  
  fetchData();
}, []);

2. Зависимости и их влияние

Второй аргумент useEffect — массив зависимостей, определяющий, когда эффект запускается. Что можно указывать в зависимостях:

• Значения из состояния (state)
• Пропсы (props)
• Контекст (context)
• Значения из хуков (например, значения из других useEffect или useMemo)
• Любые переменные, объявленные внутри компонента

Важные правила:

// Пустой массив [] — эффект выполняется только при монтировании
useEffect(() => { ... }, []);

// С зависимостями — эффект на каждое их изменение
useEffect(() => { ... }, [prop1, state2]);

// Без массива — эффект на каждый рендер (ОПАСНО!)
useEffect(() => { ... }); // Антипаттерн в большинстве случаев

3. Очистка эффектов

Внутри useEffect можно возвращать функцию очистки, которая выполняется перед размонтированием компонента или перед следующим запуском эффекта:

useEffect(() => {
  const subscription = externalService.subscribe(data => {
    setValue(data);
  });
  
  // Функция очистки
  return () => {
    subscription.unsubscribe();
    clearInterval(timerId);
    // Другие очищающие действия
  };
}, [dependency]);

4. Ограничения и предостережения

Что нельзя делать внутри useEffect:

• Изменять состояние синхронно в ответ на другой стейт без зависимостей (риск бесконечных циклов)
• Выполнять слишком тяжелые синхронные операции (блокируют основной поток)
• Злоупотреблять эффектами для логики, которую лучше вынести в обработчики событий

Плохая практика — бесконечный цикл:

useEffect(() => {
  setCount(count + 1); // БЕСКОНЕЧНЫЙ ЦИКЛ при каждом рендере!
});

Рекомендации по организации:

• Разделяй эффекты по назначению (лучше несколько useEffect, чем один большой)
• Используй useCallback и useMemo для стабильности зависимостей
• Выноси асинхронную логику в отдельные функции внутри эффекта
• Для сложной логики рассмотри кастомные хуки

5. Современные альтернативы

React 18+ рекомендует:

• useEffect для синхронизации с внешними системами
• События для действий пользователя (клики, отправка форм)
• Библиотеки типа React Query для кэширования запросов
• useSyncExternalStore для подписок на внешние хранилища

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