React -Class based Component this.setState (previous state) different from new updated value?

Question

I'm currently trying to learn React by multiple recent courses.

To update an state, most courses suggest going this way:

 const updatedNinjas = [...this.state.ninjas, newNinja];
 this.setState({
 ninjas: updatedNinjas
 });

However, since setState is "asynchronous", the official react documentation recommends to use the previous state and update based on this one.

this.setState(prevState => ({
 ninjas: [...prevState.ninjas, newNinja]
 }));

Are both solving the same issue (since we use a new array each time in the first example) or is only the last one foolproof?

Answer 1

If your new state is calculated based on any value which is already in state - then you should use the second form of setState where you use a function:

this.setState(prevState => ({
 ninjas: [...prevState.ninjas, newNinja]
}));

or even:

this.setState(({ninjas}) => ({
 ninjas: [...ninjas, newNinja]
}));

It's due to state changes are asynchronous and could be batched due to performance reasons.

If you change the state using some variable which is not based on any value from state - you're free to use a simple version:

this.setState({
 answer: 42
});

Regarding your

since we use a new array each time in the first example

indeed you create a new array each time, but you create it using some set of items which can be not relevant by that time when actual state change will be performed by React under the hood.

• Advena: Thanks for clearing this out! Don't know why downvote tho
• Advena: One thing I have an issue with now, using the second method, I'm adding items mutliple times after several submits, because It submits newNinja1 first, then on second submit it adds newNinja1 and newNinja2 on top of the ninja list which already contains newNinja1. How to avoid this duplication when using prevState
• user7993009: @Tanckom use the includes function from JavaScript to check if the previous state contains the item you want to add.

Answer 2

Setting states with array helped me in pagination cases works without loosing any data from states

this.setState(prevState => ({
 ninjas: [...prevState.ninjas, ...newNinja]
}));

Answer 3

As you are beginner so i would like to explain you a bit.

in the code below

...this.state.ninjas

these ... is called spread syntax, soo what following code snipet do is to concate the existing state with the new items; what it results in is to re-render the component with updated state.

const updatedNinjas = [...this.state.ninjas, newNinja];
 this.setState({
 ninjas: updatedNinjas
 });

As for as comparision is concerend they both do the same thing, what react documentation suggests is that first approach may fail but it doesn't say it always fail as i have never seen it failing in my 1.5 years of react experience.

• Advena: I didn't ask for the explanation of spread operators. I know what they do. I was simply asking how react works if it considers both methods or only last one to consider previous state