Как корректно отменить setTimeout внутри хука при размонтировании компонента или сбросе состояния?

Проблема с setTimeout в React

При использовании setTimeout внутри React-компонента возникает риск, что колбэк выполнится после того, как компонент уже размонтирован. Это может привести к утечкам памяти, ошибкам обновления состояния на размонтированном компоненте или неожиданному поведению.

Решение с помощью useEffect и cleanup функции

React предоставляет механизм очистки через возврат функции из useEffect. Эта функция вызывается при размонтировании компонента или перед повторным выполнением эффекта. Используйте её для вызова clearTimeout.

import { useEffect, useState } from 'react';

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

  useEffect(() => {
    const timerId = setTimeout(() => {
      setCount(prev => prev + 1);
    }, 1000);

    // Функция очистки
    return () => {
      clearTimeout(timerId);
    };
  }, []); // Пустой массив зависимостей — выполняется один раз

  return Count: {count};
}

Обработка зависимостей и сброса состояния

Если таймер должен перезапускаться при изменении определённых значений, укажите их в массиве зависимостей. При каждом изменении зависимости эффект перезапускается: сначала вызывается cleanup (отменяет старый таймер), затем создаётся новый.

useEffect(() => {
  const timerId = setTimeout(() => {
    // действие
  }, delay);

  return () => clearTimeout(timerId);
}, [delay]); // перезапуск при изменении delay

Вывод

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