Какие проблемы могут возникнуть при работе с setInterval в useEffect?

Использование setInterval внутри useEffect в React требует особого внимания к жизненному циклу компонента и управлению побочными эффектами. Основная сложность заключается в том, что интервал продолжает выполняться в фоновом режиме, даже если компонент, который его создал, был удалён с экрана (размонтирован).

Основные проблемы

• Утечка памяти: Если не остановить интервал при размонтировании компонента, он продолжит работать, занимая ресурсы и потенциально вызывая утечку памяти.
• Обращение к неактуальному состоянию: Колбэк, переданный в setInterval, "захватывает" значения переменных (включая состояние) на момент создания интервала. Это означает, что внутри интервала вы будете работать со старыми (замыкающими) значениями, а не с актуальными.
• Неконтролируемое создание интервалов: Если забыть указать пустой массив зависимостей [] в useEffect, хук будет выполняться при каждом рендере, создавая новые интервалы, что быстро приведёт к падению производительности.

Правильный паттерн с очисткой

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

useEffect(() => {
  const intervalId = setInterval(() => {
    console.log('Таймер сработал');
  }, 1000);

  // Функция очистки
  return () => {
    clearInterval(intervalId);
  };
}, []); // Пустой массив зависимостей = эффект только при монтировании

Работа с актуальным состоянием

Чтобы внутри интервала иметь доступ к последнему значению состояния, можно использовать реф (useRef) или функциональную форму обновления состояния (setState(prev => prev + 1)). Функциональная форма гарантирует, что вы работаете с актуальным предыдущим значением, которое React передаёт в функцию-обновление.

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

useEffect(() => {
  const intervalId = setInterval(() => {
    // Используем функциональное обновление для получения актуального count
    setCount(prevCount => prevCount + 1);
  }, 1000);

  return () => clearInterval(intervalId);
}, []);

Этот подход применяется для реализации периодических действий в интерфейсе: обновление данных (например, тикер акций), создание таймеров, опрос сервера (polling) или любая другая логика, которая должна выполняться с заданной периодичностью.

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