Почему при изменении состояния react-компонента в setInterval, значение состояния каждый раз сбрасывается к исходному?

Question

[Никита]

Код подобный этому

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

export const App = (): JSX.Element => {
    const [count, setCount] = useState(0);
    
    useEffect(() => {
        setInterval(() => {
            console.log(count);
            setCount(count + 1);
        }, 100);
    }, []);

    return (
        <div>
            { count }
        </div>
    )
}

В консоли вижу изначальное значение count, т.е - 0, что я делаю не так?

Answer 1

[Никита]

Пояснение из документации React:
https://ru.reactjs.org/docs/hooks-faq.html#what-ca...

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

  useEffect(() => {
    const id = setInterval(() => {
      setCount(count + 1); // Этот эффект зависит от переменной состояния `count`
    }, 1000);
    return () => clearInterval(id);
  }, []); //  Баг: `count` не указан в качестве зависимости

  return <h1>{count}</h1>;
}

Пустой набор зависимостей [] означает, что эффект будет выполняться только один раз, когда компонент монтируется, а не при каждом повторном рендере. Проблема в том, что внутри обратного вызова setInterval значение count не изменяется, потому что мы создали замыкание со значением count, установленным в 0, как это было при выполнении обратного вызова эффекта. Каждую секунду этот обратный вызов вызывает setCount(0 + 1), поэтому счетчик никогда не превышает 1.

Если переписать список зависимостей как [count], то баг будет устранён, но это приведёт к сбрасыванию интервала при каждом изменении. Такое поведение может быть нежелательно. Чтобы исправить это, мы можем применить форму функционального обновления хука setState, которая позволяет указать, как должно меняться состояние, не ссылаясь явно на текущее состояние:

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

  useEffect(() => {
    const id = setInterval(() => {
      setCount(c => c + 1); // ✅ Эта строчка не зависит от внешней переменной `count`
    }, 1000);
    return () => clearInterval(id);
  }, []); // ✅ Наш эффект не использует никаких переменных из области видимости компонента

  return <h1>{count}</h1>;
}

Answer 2

[0xD34F]

Потому что count, к которому вы добавляете единицу - это тот, который был при первом рендеринге компонента. Нужен доступ к актуальному - вместо числа передавайте в setCount функцию: setCount(count => count + 1);.

что я делаю не так?

Одно из двух: не читаете документацию, или взялись за react не зная языка.

Comments

[Никита]

А как насчет третьего варианта? Не было нужды работы с setInterval и по этой причине имел не правильный подход к получению требуемого результата. Здесь есть необходимость во внимательности к работе React, но не в знаниях языка. И у меня нет обязанности читать документацию сверху донизу. Если я не прав, вы вольны меня поправить.

[0xD34F]

Никита, конечно не правы. Но поправлять не буду. Повышать свой профессиональный уровень или нет - дело ваше.

[Никита]

Я нисколечко желаю с вами общаться, поэтому продолжать подобное не буду. Единственное, чем я закончу: вы, видимо, в экстрасенсы метите, раз уверены в каком-то проф. уровне.

Answer 3

[hzzzzl]

замыкания и вся связанная с этим фигня, в функции будет значение count на момент создания функции

к счастью, можно сделать так

useEffect(() => {
        setInterval(() => {
            console.log(count);  //  всегда будет 0
            setCount(prev => prev + 1);   // prev будет актуальным
        }, 100);
    }, []);