Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript React Basics (retired) Designing Data Flow Communicating Events

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;

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

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;

Could you explain why this method is better Iain Simmons


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.

Ok, thanks Iain Simmons

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

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
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

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


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