Как работать с таймерами в React?

Работа с таймерами в React требует особого внимания из-за компонентной модели и жизненного цикла. Если просто вызвать setTimeout или setInterval в теле функционального компонента, таймер будет создаваться при каждом рендере, что приведёт к неконтролируемому накоплению таймеров и утечкам памяти. Правильный подход — использовать хук useEffect для управления побочными эффектами, к которым относятся и таймеры.

Базовый пример с setTimeout

Вот как можно реализовать одноразовый таймер:

import { useEffect, useState } from 'react';

function TimerComponent() {
  const [message, setMessage] = useState('');

  useEffect(() => {
    // Устанавливаем таймер
    const timerId = setTimeout(() => {
      setMessage('Таймер сработал!');
    }, 2000);

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

  return {message};
}

Пример с setInterval

Для периодических действий логика аналогична, но очистка ещё важнее:

import { useEffect, useState, useRef } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  const intervalRef = useRef(null);

  useEffect(() => {
    intervalRef.current = setInterval(() => {
      setCount(prev => prev + 1);
    }, 1000);

    return () => {
      clearInterval(intervalRef.current);
    };
  }, []);

  const stopTimer = () => {
    clearInterval(intervalRef.current);
  };

  return (
    
      Счёт: {count}
      Остановить
    
  );
}

Использование useRef для хранения идентификатора таймера позволяет получить к нему доступ из других функций компонента (например, обработчика клика для остановки).

Важные аспекты

• Очистка (cleanup): Всегда возвращайте функцию очистки из useEffect, которая вызывает clearTimeout или clearInterval. Это гарантирует, что таймер не сработает на размонтированном компоненте.
• Зависимости: Если таймер должен перезапускаться при изменении каких-либо пропсов или состояния, укажите их в массиве зависимостей useEffect. В этом случае функция очистки выполнится перед каждым новым запуском эффекта.
• useRef vs useState: Для хранения ID таймера лучше использовать useRef, так как его изменение не вызывает ререндер компонента, в отличие от useState.

Таймеры применяются для отложенных действий (например, поиск с задержкой debounce), анимаций, периодического опроса сервера или создания обратных отсчётов.

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