Как гарантировать использование актуального значения состояния внутри setInterval?

Проблема с замыканиями в setInterval

Когда вы используете setInterval внутри useEffect, функция обратного вызова создает замыкание на переменную состояния, которая была актуальна на момент создания интервала. Это означает, что даже если состояние обновляется, интервал продолжает использовать старое значение.

Решение с функциональным обновлением

Самый простой способ — использовать функциональную форму setState, которая получает предыдущее состояние и возвращает новое:

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

useEffect(() => {
  const id = setInterval(() => {
    setCount(prev => prev + 1); // всегда использует актуальное значение
  }, 1000);
  return () => clearInterval(id);
}, []);

Решение с useRef

Другой подход — хранить актуальное значение в ref и читать его внутри интервала:

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

useEffect(() => {
  countRef.current = count;
}, [count]);

useEffect(() => {
  const id = setInterval(() => {
    console.log(countRef.current); // всегда актуально
  }, 1000);
  return () => clearInterval(id);
}, []);

Вывод

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