> Как работает useEffect хук в React (React)

useEffect - это хук в React, который позволяет выполнять побочные эффекты (side effects) в функциональных компонентах. Он заменяет методы жизненного цикла классовых компонентов, такие как componentDidMount, componentDidUpdate и componentWillUnmount.

Синтаксис:

JSX
useEffect(() => {
  // код эффекта
  return () => {
    // очистка эффекта (опционально)
  };
}, [зависимости]);

Как работает:

• Первый аргумент - функция-эффект, которая запускается после каждого рендера, если изменились указанные зависимости.

• Второй аргумент - массив зависимостей. React сравнивает их с предыдущими значениями (с помощью Object.is) и перезапускает эффект только при изменениях.

• Если массив пуст ([]), эффект выполняется один раз после монтирования (аналог componentDidMount).

• Если зависимости не указаны, эффект запускается после каждого рендера (что может привести к бесконечному циклу, если внутри изменяется состояние).

• Функция очистки (возвращаемая из эффекта) вызывается перед размонтированием компонента и перед повторным запуском эффекта (аналог componentWillUnmount и очистка предыдущего эффекта).

Примеры:

JSX
// Загрузка данных при монтировании
useEffect(() => {
  fetch('/api/data').then(res => setData(res));
}, []);

// Подписка с очисткой
useEffect(() => {
  const subscription = source.subscribe(handleEvent);
  return () => subscription.unsubscribe();
}, [source]);

// Эффект, зависящий от пропсов
useEffect(() => {
  document.title = `Привет, ${name}`;
}, [name]);

Важно: useEffect выполняется асинхронно после того, как браузер отрисовал изменения, чтобы не блокировать UI. Для синхронных операций (например, измерение DOM) используйте useLayoutEffect.