JavaScript React Basics (retired) Designing Data Flow Communicating Events

lihaoquan
lihaoquan
12,045 Points
Posted by lihaoquan
lihaoquan
12,045 Points

Is it better to update a specific property using setState(), or dump the whole state into setState()?

In the onScoreChange function, the player's score is changed by doing

this.state.players[index].score += delta;
this.setState(this.state);

But what if state contains some properties that do not need to be updated? Is it better to only let setState to change players.score property when calling setState() function instead of passing the whole this.state into the setState() function?

Will this affect performance if there are other properties in state as the application grows bigger?

4 Answers

Iain Simmons
Iain Simmons
Treehouse Moderator 32,244 Points

I think a better way to change the state is to create a local variable containing the current property of the state you wish to change, and then update that and use it with setState:

var players = this.state.players;
players[index].score += delta;
this.setState({players: players});

Or if you're using ES2015/ES6:

let {players} = this.state;
players[index].score += delta;
this.setState({players});
hum4n01d
hum4n01d
25,463 Points
hum4n01d
hum4n01d
25,463 Points

Could you explain why this method is better Iain Simmons

Iain Simmons
Iain Simmons
Treehouse Moderator 32,244 Points

hum4n01d:

According to the React State and Lifecycle docs, the object you pass to setState is merged with the current state, so if you're passing the whole state object, it has to merge everything, and check all properties in the state to see what has changed.

if you only pass the property you're changing, it only updates that property and leaves the rest as it is.

Also, changes to state happen asynchronously, so the state could be changing in the middle of the code where you're changing one property on the state object, and then calling setState. If you assign the current state or part of state that you're changing to another variable, you're essentially getting the value at that particular moment and ensuring that the changes you make to that value are the ones being merged with the rest of the state.

Hope that makes sense.

M Ashraful Alam
M Ashraful Alam
12,328 Points
M Ashraful Alam
M Ashraful Alam
12,328 Points

Good point. Instead of creating a new variable we could just update state like - 

this.state.players[index].score += delta
this.setState({players: this.state.players})
Laurie Williams
Laurie Williams
10,174 Points
Laurie Williams
Laurie Williams
10,174 Points

There's no reason that you can't dump the entire state but as the state gets bigger, the harder it will be to maintain.

Guil Hernandez
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Guil Hernandez
Treehouse Teacher
Guil Hernandez
.a{fill-rule:evenodd;}techdegree
Guil Hernandez
Treehouse Teacher

Another way you could update the score state is:

onScoreChange(index, delta) {
  this.setState( prevState => {
    return { 
      score: prevState.players[index].score += delta 
    };
  });
}

React Docs:

use a second form of setState() that accepts a function rather than an object. That function will receive the previous state as the first argument, and the props at the time the update is applied as the second argument:

Sum Tsui
Sum Tsui
Full Stack JavaScript Techdegree Student 29,117 Points
Sum Tsui
Sum Tsui
Full Stack JavaScript Techdegree Student 29,117 Points

just found out passing different arguments into setState() and change score, then check State in devtool, the state will be different for:

this.setState(this.state);
this.setState(this.state.players);
this.setState(this.state.players[index]);

so maybe there is a reason to better passing the whole state.