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

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)});