javascript - When does React's setState change the state

Question

I have a function open() in a child component which calls the parent's function open() through props, and it could be multiple times in a row.

the parent function contains this line

this.setState({numOpen: (++this.state.numOpen)});

This line works and updates the state at every increment.

But before, this line

this.setState({numOpen: (this.state.numOpen + 1)});

skipped over several increments and was breaking the program.

Does setState get called asynchronously? if not, what could be the reason for it?

Answer 1

As the Duplicate answer by @MayankShukla indicates, setState is asynchronous,

however Adding an explanation and a corrected approach

In the below case:

this.setState({numOpen: (++this.state.numOpen)});

You are mutating the state directly and then setting the value and hence it works, but is not the right way to do it

In the second case

this.setState({numOpen: (this.state.numOpen + 1)});

setState is adding the value to the current state as you experience it leads to unexpected behaviour due to its asynchronous nature.

The correct way to do it is to use the prevState callback approach

 this.setState((prevState) => ({numOpen: (prevState.numOpen + 1)});