Как корректно очищать setInterval в useEffect?

Question

setInterval очищается через clearInterval, вызванный в функции, которую возвращает useEffect. Эта функция выполняется при размонтировании компонента и перед повторным запуском эффекта. Важно сохранить идентификатор интервала в переменную внутри эффекта. Такой подход гарантирует, что таймер не продолжит работать после ухода компонента со страницы.

YeaHub · Accepted Answer

React ожидает, что каждый эффект сам управляет своим жизненным циклом, включая корректное завершение.ОпределениеCleanup-функция в useEffect — это функция, возвращаемая из useEffect, которая вызывается React при размонтировании компонента или перед повторным выполнением эффекта.Базовый шаблон очистки интервалаПеред использованием интервала обычно достаточно следующего шаблона:useEffect(() => {
  const intervalId = window.setInterval(() => {
    // логика интервала
  }, 1000);

return () => {
    window.clearInterval(intervalId);
  };
}, []);
Почему именно такИнтервал создаётся внутри эффектаReact чётко понимает, к какому эффекту относится этот сайд-эффект.Очистка возвращается из того же эффектаэто гарантирует симметрию: что создали — то и закрыли.Зависимости эффекта контролируют пересозданиепри изменении зависимостей старый интервал будет очищен перед созданием нового.Типичная ошибкаОчищать интервал вне useEffectReact не знает, когда это делать.Забывать очистку при наличии зависимостейв итоге создаётся несколько интервалов одновременно.ВыводКорректная очистка setInterval в useEffect — это обязательная практика при работе с таймерами и другими сайд-эффектами, иначе приложение быстро начинает вести себя нестабильно.