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

В React хук useEffect может возвращать функцию очистки (cleanup function), которая вызывается при размонтировании компонента или перед повторным выполнением эффекта.

Короткий ответ

Что ответить на собеседовании

В React хук useEffect может возвращать функцию очистки (cleanup function), которая вызывается при размонтировании компонента или перед повторным выполнением эффекта.

Подробный разбор

Ответ с пояснениями

В React хук useEffect может возвращать функцию очистки (cleanup function), которая вызывается при размонтировании компонента или перед повторным выполнением эффекта.

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

Пример правильного использования:

useEffect(() => {
  const intervalId = setInterval(() => {
    console.log('Тик');
  }, 1000);

  return () => {
    clearInterval(intervalId); // Очистка интервала при размонтировании
  };
}, []);

Без clearInterval интервал будет продолжать работать в фоне, что может вызвать ошибки и ухудшить производительность.

ИИ-помощник для собеседований

Хочешь уверенно проходить собеседования?

Попробуй ИИ-помощник для собеседований: слышит вас и собеседника, анализирует экран, подсказывает ответы в реальном времени, работает без VPN и не попадает в захват экрана.

Подробнее