With react hooks set state, in what cases I have to pass a function to set state?

Question

here is my code:

function Tiker() {
  var [count, setCount] = useState(0);

  useEffect(() => {
    var timerID = setInterval(_=>
      setCount(count=>count+1)//setCount(count+1) wont work
    , 1000);

    return function cleanup() {
      clearInterval(timerID);
    };
  }, []);
  return <div>
      this is ticker   
      <button onClick={() => 
        setCount(count + 1)//setCount(count+1) does work
      }>up </button>
      {count}
      </div>
}

By trial and error I discovered that if I use setCount from within setinterval callback, I have to pass a callback to the set state rather than just value.

its not the case if I call from onclick.

Why is that?

Fyodor Yemelyanenko · Answer 1 · 2019-06-27T23:00:02.313

The problem is the second argument of useEffect

useEffect(() => {
    var timerID = setInterval(_=>
        setCount(count=>count+1)//setCount(count+1) wont work
    , 1000);

    return function cleanup() {
        clearInterval(timerID);
    };
}, []);

It is empty array ([]). It defines list of dependencies for hook. As it empty, it means that hook is not dependent from any value of state or props. So count variable is consumed on first call of useEffect and than stays stale.

To correct this you should either completely remove second argument of useEffect or make array contain [count].

Callback is working as it receives previous count value as first argument.

So correct code will look like

function Tiker() {
    var [count, setCount] = useState(0);

    useEffect(() => {
        var timerID = setInterval(_=>
            setCount(count + 1)
        , 1000);

        return function cleanup() {
            clearInterval(timerID);
        };
    }, [count]);  // Put variable that useHook depends on

    return <div>
        this is ticker   
        <button onClick={() => 
            setCount(count + 1) //setCount(count+1) does work
        }>up </button>
        {count}
    </div>
}

the reason that i used an empty array is tell react to call the setinterval and clear interval just once in the mount/unmount cycle. (I followed this advice: https://stackoverflow.com/questions/53395147/use-react-hook-to-implement-a-self-increment-counter ) . when I add count to that array, the functions are called on every update of the component which occurs every second — yigal, Jun 27 '19 at 23:15
This case you should use callback in `setCount` as you already did. — Fyodor Yemelyanenko, Jun 27 '19 at 23:33

yigal · Accepted Answer · 2019-06-28T19:02:23.523

0

It appears that using a callback is the easiest way to change state when called from setInterval. as evident by Frodor comment above and from https://overreacted.io/making-setinterval-declarative-with-react-hooks/

edited Jun 28 '19 at 19:02

answered Jun 28 '19 at 01:06

yigal

3,923
8
37
59

With react hooks set state, in what cases I have to pass a function to set state?

2 Answers2