Что такое useEffect?

useEffect — хук для выполнения побочных эффектов в функциональных компонентах: запросов к серверу, подписок, таймеров, работы с DOM и внешними системами.

Сигнатура

useEffect(() => {
  const subscription = api.subscribe(userId, setData);
  return () => subscription.unsubscribe(); // cleanup
}, [userId]); // зависимости

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

Варианты массива зависимостей

• Без массива — эффект выполняется после каждого рендера.
• [] — один раз после первого рендера (монтирования).
• [a, b] — после первого рендера и далее при изменении a или b.

Типичные применения

• Загрузка данных при монтировании или изменении параметров.
• Подписка на события (addEventListener, WebSocket) с отпиской в cleanup.
• Синхронизация с внешним хранилищем (localStorage, аналитика).

Нюансы и частые ошибки

• Эффект срабатывает асинхронно после отрисовки и не блокирует её (в отличие от useLayoutEffect).
• Забытые зависимости → устаревшие значения; лишние зависимости → бесконечные перезапуски (особенно объекты, создаваемые в рендере).
• В React 18 в StrictMode (dev) эффект монтирования выполняется дважды — так проверяется корректность cleanup.
• useEffect — механизм синхронизации с внешним миром, а не «замена жизненного цикла»: не стоит использовать его для вычислений из props/state.

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

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