В каком порядке выполняются useEffect?

Порядок выполнения useEffect

Хук useEffect в React выполняется асинхронно после того, как компонент отрендерился и браузер обновил экран. Это позволяет не блокировать пользовательский интерфейс при выполнении побочных эффектов, таких как запросы к API или подписки на события.

Фазы выполнения

• Монтирование: useEffect запускается после первого рендера. Если передан массив зависимостей, эффект выполняется только при изменении этих зависимостей.
• Обновление: При изменении зависимостей сначала выполняется функция очистки предыдущего эффекта (если она есть), затем новый эффект.
• Размонтирование: Выполняется только функция очистки, без запуска нового эффекта.

Пример кода

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    console.log('Effect runs after render');
    return () => {
      console.log('Cleanup runs before next effect or unmount');
    };
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
    </div>
  );
}

В этом примере при каждом нажатии кнопки сначала выполняется очистка (если count изменился), затем новый эффект. При первом рендере очистка не вызывается.

Вывод

Понимание порядка выполнения useEffect важно для корректной работы с подписками, таймерами и запросами. Используйте зависимости для контроля частоты выполнения и всегда очищайте ресурсы в возвращаемой функции, чтобы избежать утечек памяти.