Can't understand how passing function to update state hook works

user_15330961 0
Viewed 53

In the following code:

// create state count
const [count,setCount] = useState(0)

//update state 
setCount(count-1)
setCount(count-1)

The value of count decreases by one only, because setCount() is an asynchronous function. I understand this. But why does the following code work fine, i.e count is decreased by two when a function is passed instead of a statement?

setCount(prevCount => prevCount-1)
setCount(prevCOunt => prevCount-1)

Why does the same behaviour as in the first case not appear here? I have limited experience with async functions and am new to react. Thanks for reading!

reactjs asynchronous javascript
1 Answers

The value of count decreases by one only, because setCount() is an asynchronous function

No. It is decreased by 1 even with two setCount calls because you pass count - 1 to both function calls. In both calls, you are passing the same value.

Reason why count is not updated after the first setCount call is because state is constant within a particular render of a component. Component can't see the updated state until it re-renders.

If the value of count is 5, then the following

setCount(count-1)
setCount(count-1)

is like

setCount(5 - 1)
setCount(5 - 1)

Why does the same behaviour as in the first case not appear here?

That's because when you pass a function to setCount, prevCount is the most recent value of count. In this case, you are not subtracting 1 from the same value of count.

If the value of count is 5, then the following

setCount(prevCount => prevCount-1)
setCount(prevCount => prevCount-1)

is like

setCount(5 => 5 - 1)
setCount(4 => 4 - 1)
user_60943480
Related