Какие возможности дает useEffect в React?

useEffect — «мост» между React и внешним миром: он даёт возможность выполнять код, который нельзя делать в чистом рендере, с контролем времени выполнения и очисткой.

Основные возможности

Синхронизация с внешними системами по данным. Эффект перезапускается при изменении зависимостей — «пока компонент показывает X, поддерживай связь с X»:

useEffect(() => {
  const conn = chat.connect(roomId);
  return () => conn.close();
}, [roomId]); // смена комнаты: отключение от старой, подключение к новой

Загрузка данных при монтировании и смене параметров (с отменой в cleanup от гонок).

Подписки: события window/document, WebSocket, BroadcastChannel, MediaQuery — с гарантированной отпиской.

Таймеры и интервалы с очисткой.

Императивная работа с DOM после рендера: фокус, измерения, синхронизация со сторонними библиотеками (карты, чарты); для «до отрисовки кадра» — useLayoutEffect.

Интеграция с не-React кодом: аналитика (pageview при смене маршрута), title/meta документа, localStorage-синхронизация.

Реакция на монтирование/размонтирование: [] + cleanup — инициализация и освобождение ресурсов.

Свойства механизма

• Выполняется после коммита и отрисовки — не блокирует UI.
• Cleanup перед каждым перезапуском и при размонтировании — ресурсы не текут.
• Массив зависимостей — точный контроль «когда»: каждый рендер / однажды / по изменению значений.

Граница возможностей

Эффект — не для всего: производные данные вычисляются в рендере/useMemo, реакции на клики — в обработчиках, серверные данные — лучше React Query. «You might not need an effect» — официальная позиция.

Коротко для собеседования

useEffect позволяет: синхронизироваться с внешними системами по зависимостям (подписки, соединения — с cleanup), грузить данные, работать с таймерами и DOM после рендера, интегрироваться с не-React кодом (аналитика, title, storage). Выполняется после отрисовки, чистится автоматически. Не для вычислений и обработки событий.