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

Вызывает ли ререндер страницы useEffect?

Хуки

Сам по себе useEffect ререндер не вызывает — он выполняется уже после рендера. Но код внутри эффекта может его спровоцировать.

Когда ререндера не будет

useEffect(() => {
  document.title = 'Профиль';   // побочный эффект без setState
  analytics.track('view');
}, []);

Эффект просто выполняется после коммита — React не перерисовывает компонент.

Когда ререндер будет

Если внутри эффекта вызывается setState (или dispatch, или обновляется контекст/стор):

useEffect(() => {
  setUser(loadedUser);   // ← вот это вызывает ререндер
}, [id]);

Последовательность: рендер → коммит → эффект → setState → ещё один рендер. Именно поэтому «загрузка данных в эффекте» всегда даёт дополнительный рендер после прихода данных — это нормально.

Опасные случаи

useEffect(() => {
  setCount(count + 1);   // ❌ без deps: рендер → эффект → рендер → ... бесконечно
});

useEffect(() => {
  setData({ ...data });  // ❌ нестабильная зависимость → цикл
}, [data]);

Бесконечный цикл — классическая ошибка: эффект меняет state, входящий в его же зависимости.

Про «ререндер страницы»

Ререндерится компонент, вызвавший setState, и его поддерево — не «страница». Если такой компонент стоит в корне, каскад действительно доходит до всего дерева: лечится спуском состояния вниз.

Практический совет

Вычисляемые из props/state значения не нужно класть в state через эффект — считайте их в рендере или useMemo: это убирает лишний цикл рендера целиком.

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

Нет: эффект выполняется после рендера и сам его не вызывает. Ререндер происходит, если внутри эффекта вызвать setState/dispatch — тогда будет дополнительный цикл (типично при загрузке данных). Эффект, меняющий state из собственных deps, даёт бесконечный цикл; производные значения считать в рендере/useMemo, а не в эффекте.

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