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