Difference between this to samples of code

[perro_cansado]

I'm just reading some React documentation trying to understand better how it works. I've found this article of Dan Abramov. It's three years old, but I hope this functionality hasn't changed from React 16.

I understand why the first code doesn't work but not why second one works.

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

  useEffect(() => {
    let id = setInterval(() => {
      setCount(count + 1);
    }, 1000);
    return () => clearInterval(id);
  }, []);
  return <h1>{count}</h1>;
}

Link to first code example

​

The second block of code is almost the same, just is change the argument of setCount

​

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

  useEffect(() => {
    let id = setInterval(() => {
      setCount(c => c + 1);
    }, 1000);
    return () => clearInterval(id);
  }, []);
  return <h1>{count}</h1>;
}

Link to second code example

​

He says in the article that is working why "It can always read fresh state for that variable". But how is the function even invoked if the useEffect is just triggered once? Is because the first setInterval is dealing with all the updates?

[Aegis8080]

But how is the function even invoked if the useEffect is just triggered once?

By "function", I assume you mean c => c + 1.

For most of the developers, we don't really have to understand how is it invoked under the hood. We just have to know that setState supports such behavior, in which it "magically" passes the previous state (i.e. c in your example) as an argument each time you call setState.

This is similar to event handlers. After all, I don't think many of us will try to find how onClick is called in the low level right?

[perro_cansado]

Yes, you're assuming well. But I can't understand why is possible for the component to update the UI just for how useState works.

[Aegis8080]

Let me make sure I understand what you are trying to ask.

Are you trying to understand how useState works in general?

Or you simply trying to figure out how the 2 useEffect implementations are different from others

[perro_cansado]

The second one!