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

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

Короткий ответ: нет, useEffect не вызывает ререндер, но может к нему привести косвенно.

Жизненный цикл компонента с useEffect

Важно понимать порядок выполнения:

1. Рендер → React обновляет виртуальный DOM
2. Коммит → изменения применяются к реальному DOM
3. Выполнение useEffect → после завершения всех DOM операций

function MyComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("Эффект выполнен, count =", count);
  }, [count]);

  console.log("Компонент отрендерился");

  return <div>{count}</div>;
}

Порядок логов:

1. "Компонент отрендерился"
2. "Эффект выполнен, count = 0"

Когда useEffect может вызвать ререндер

Ререендер происходит косвенно, если внутри эффекта вы изменяете state:

function Example() {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    setIsLoading(true);
  }, []);

  return <div>{isLoading ? "Загрузка..." : data}</div>;
}

Как избежать бесконечных ререндеров

function BadExample() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    setCount(count + 1);
  }, [count]);
}

Это вызывает бесконечный цикл!

Решение: правильные зависимости

function GoodExample() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("Компонент загружен");
  }, []);

  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Практические выводы

• useEffect сам по себе не вызывает ререндер — он выполняется после рендера
• Ререндер происходит, если внутри эффекта вы вызовёте setState
• Используй пустые зависимости [] для инициализации
• Указывай нужные зависимости чтобы избежать циклов
• Cleanup функция отменяет подписки перед пересчётом