PassFront
  1. PassFront
  2. База знаний
  3. Хуки

Есть ли в React аналоги useEffect?

Хуки

Да — у useEffect есть «родственники», отличающиеся моментом выполнения: useLayoutEffect и useInsertionEffect; плюс альтернативные способы решать те же задачи без эффектов.

Прямые аналоги (семейство эффектов)

  • useEffect — после коммита и отрисовки кадра; стандарт для запросов, подписок, работы с внешним миром.
  • useLayoutEffect — синхронно после изменений DOM, до отрисовки: измерить layout и поправить без мигания (тултипы, скролл).
  • useInsertionEffect — ещё раньше, до мутаций DOM; узкоспециальный, для CSS-in-JS библиотек (вставка стилей).

Порядок: insertion → layout → отрисовка → effect.

В классовых компонентах

Методы жизненного цикла: componentDidMount + componentDidUpdate + componentWillUnmount вместе покрывают то, что делает useEffect с разными deps и cleanup.

Не аналоги, но замены в конкретных задачах

Современный React часто позволяет обойтись без эффекта:

  • данные с сервера — React Query/SWR или лоадеры маршрутов/серверные компоненты вместо fetch в useEffect;
  • производные значения — вычисление в рендере или useMemo (не effect + setState);
  • реакция на действия пользователя — обработчики событий;
  • подписка на внешние сторы — useSyncExternalStore (корректнее ручного эффекта);
  • «выполнить при изменении props» — часто пересмотр архитектуры (ключи, вычисления) вместо эффекта.

Документация React прямо называет ряд употреблений эффектов лишними («You Might Not Need an Effect»).

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

Аналоги по времени выполнения: useLayoutEffect (до отрисовки, для измерений DOM) и useInsertionEffect (для CSS-in-JS); в классах — тройка componentDidMount/DidUpdate/WillUnmount. Но для многих задач эффект не нужен вовсе: данные — React Query, производные — useMemo, сторы — useSyncExternalStore, действия — обработчики.

Другие вопросы раздела