javascript - setTimeout for this.state vs useState

Question

When I use class component, I have code:

setTimeout(() => console.log(this.state.count), 5000);

When I use hook:

const [count, setCount] = useState(0);
setTimeout(() => console.log(count), 5000);

If I trigger setTimeout then change the count to 1 before the timeout (5000ms), class component will console.log(1) (the newest value), and for useState it is console.log(0) (value when register timeout).
Why does this happen?

Answer 1

For the useState, it create a timeout using count in the first time. It accesses the count value through a closure. When we set a new value by setCount, the component rerender but does not change the value passed to timeout.
We can use const count = useRef(0) and pass to timeout count.current. This will always use the newest value of count.
Check this link for more information.