I’m new to React, just have a question on setState method. Let’s say we have a component:
class MyApp extends React.Component {
state = {
count: 3
};
Increment = () => {
this.setState((prevState) => ({
options: prevState.count + 1)
}));
}
}
so why we have to use prevState in the setState method? why can’t we just do:
this.setState(() => ({
options: this.state.count + 1)
}));
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 recommendedthis.setState({prop: newValue})
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 thecount
will be incremented by 4 on click of both buttons then it’s not right guess 😉Why? because in
IncrementWithoutPrevState
method since there are multiplesetState
calls, so React batched all those calls and updates thestate
only in the last call ofsetState
in this method, so at the time of last call tosetState
in this methodthis.state.count
is not yet updated and its value is still the same that was before entering intoIncrementWithoutPrevState
method so the resultant state will containcount
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 ofsetState
but theprevState
will always contain the modifiedstate
in the recentsetState
call. AspreviousState.count
value has already been incremented 3 times till the last call ofsetState
so the resultantstate
will contain the count value incremented by 4.If you call a function multiple times to change the value of a state property in a single
render()
function call then the updated value will not go over between the different calls without prevState mechanism.Finally sec value will be 1, because calls are async, not like high-level programming language like c++/c# or java where there is always a main function which maintains the main thread.
Therefore if you want to have
fiveSecJump()
function to work properly you have to help it by passing it an arrow function. prevState. prevState is not a keyword or member function, you can write any word here like oldState, stackTopState, lastState. It will convert to a generic function which will do your desired work.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
In this scenario when we click on Increment button then the output will be rendered into the UI is count-0 not count-3 because react groups all the state call in a single state call and does not carry the updated value over every incremented call. If I want to update the value based on the previous value then use below mentioned code.
In this scenario the output will be count-3 not count-0