Что происходит, если useEffect возвращает функцию?

Что такое функция очистки в useEffect?

Когда вы передаете функцию в useEffect, она выполняется после каждого рендера (если зависимости изменились). Если эта функция возвращает другую функцию, React сохраняет её и вызывает при размонтировании компонента или перед следующим запуском эффекта. Это называется cleanup-функцией.

Зачем это нужно?

Без очистки побочные эффекты могут накапливаться: таймеры продолжают тикать, подписки остаются активными, запросы могут обновлять размонтированный компонент. Это приводит к утечкам памяти и ошибкам. Cleanup-функция гарантирует, что ресурсы освобождаются.

Пример с таймером

import { useEffect, useState } from 'react';

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

  useEffect(() => {
    const id = setInterval(() => {
      setCount(prev => prev + 1);
    }, 1000);

    // cleanup: очищаем интервал при размонтировании
    return () => clearInterval(id);
  }, []);

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

В этом примере интервал создается один раз (пустой массив зависимостей). Когда компонент удаляется из DOM, React вызывает cleanup-функцию, которая останавливает таймер.

Пример с подпиской

useEffect(() => {
  const subscription = dataSource.subscribe();
  return () => subscription.unsubscribe();
}, [dataSource]);

Здесь при изменении dataSource сначала выполняется cleanup (отписка от старого источника), затем новый эффект.

Вывод: Используйте cleanup-функцию в useEffect для любых долгоживущих операций (таймеры, подписки, обработчики событий), чтобы избежать утечек памяти и ошибок в React-приложениях.