React's setState method with prevState argument

Question

Both signatures can be used, the only difference is that if you need to change your state based on the previous state you should use this.setState(function) which will provide you a snapshot(prevState) from the previous state. But if the change does not rely on any other previous value, then a shorter version is recommended this.setState({prop: newValue})

this.setState(prevState =>{
   return{
        ...prevState,
        counter : prevState.counter +1
   }
})

this.setState({counter : 2})

class MyApp extends React.Component {

  state = {
    count: 0
  };

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

  IncrementWithoutPrevState = () => {
    this.setState(() => ({
      count: this.state.count + 1
    }));
    this.setState(() => ({
      count: this.state.count + 1
    }));
    this.setState(() => ({
      count: this.state.count + 1
    }));
    this.setState(() => ({
      count: this.state.count + 1
    }));
  };

  render() {
    return (
      <div>
        <button onClick={this.IncrementWithoutPrevState}>
          Increment 4 times without PrevState
        </button>
        <button onClick={this.Increment}>
          Increment 4 times with PrevState
        </button>
        <h1>Count: {this.state.count}</h1>
      </div>
    );
  }
}

I just made an example for you to give an idea what is meant by "React may batch multiple setState()..." and why we should use prevState in the above scenario.

First, try to guess what should the result of Count when you click both buttons... If you think the count will be incremented by 4 on click of both buttons then it's not right guess ;)

Why? because in IncrementWithoutPrevState method since there are multiple setState calls, so React batched all those calls and updates the state only in the last call of setState in this method, so at the time of last call to setState in this method this.state.count is not yet updated and its value is still the same that was before entering into IncrementWithoutPrevState method so the resultant state will contain count incremented by 1.

Now on the other hand side if we analyze the Increment method: Again there are multiple setState calls and React batched them all that means the actual state will be updated in the last call of setState but the prevState will always contain the modified state in the recent setState call. As previousState.count value has already been incremented 3 times till the last call of setState so the resultant state will contain the count value incremented by 4.

here iseveryone know just state:prevstate.counter+1.. we can also do this with state:this.state.counter+1. This is not the way i think to use prevstate. i have problem in array when i push into existing state it allow me but second time it prevent changes