Зачем нужна функция очистки (return) в useEffect? Что произойдёт без неё при использовании setInterval?

Назначение функции очистки в useEffect

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

Что произойдёт без неё при setInterval?

Если вы используете setInterval внутри useEffect без возврата функции очистки, интервал продолжит выполняться даже после того, как компонент будет удалён из DOM. Это приводит к:

• Утечке памяти — интервал никогда не остановится.
• Выполнению колбэков на размонтированном компоненте, что может вызвать ошибки (например, попытка обновить состояние размонтированного компонента).
• Неконтролируемому увеличению количества интервалов при каждом ререндере, если зависимости изменяются.

Пример с очисткой

import { useEffect, useState } from 'react';

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

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

    // Функция очистки
    return () => {
      clearInterval(id);
    };
  }, []);

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

В этом примере интервал создаётся один раз (пустой массив зависимостей) и очищается при размонтировании компонента. Без return с clearInterval интервал будет работать вечно, даже если компонент скрыт.

Вывод

Функция очистки в useEffect обязательна для любых долгоживущих побочных эффектов, таких как таймеры, подписки или слушатели событий. Она предотвращает утечки памяти и гарантирует корректное управление ресурсами в React-приложениях.