Is it safe to mutate prevState? i.e. prevState.players[index].score += delta

This is the craziest thread I've ever read on treehouse and I've never felt more scared to death of continuing on with programming.

Hi Lean Flores,

The code Guil Hernandez wrote is perfectly valid as prevState is a clone of the state object, not the original. It's actually recommended that you mutate this object as it's already in memory and doesn't require additional lookups to the component's state which is common when doing something like the below.

// Bad, mutation occurs directly on the state
this.setState({
  score: this.state.players[index].score += delta,
})

// Good, mutation occurs on the cloned object
this.setState((prevState) => ({
  score: prevState.players[index].score += delta,
}))

Hope that helps.

Hi Chris,

When coded this way,

this.setState((prevState) => { prevState.counter += 1 return { name: "React_1" } }

counter is still updating which leads me to think that mutating prevState is mutating the actual state and not a clone of it

Hi Chris Shaw,

I added one line inside your incrementCounter() function to make things clearer:

incrementCounter() {
  console.log('(Pre) Sync updated!', this.state.counter)

  this.setState((prevState) => {
    console.log('Async before update!', this.state.counter)
    return {
      counter: prevState.counter += 1,
    }
  }, (state) => {
    console.log('Async updated!', this.state.counter)
  })

  console.log('Sync updated!', this.state.counter)
}

And the results in the console:

Clearly this.setState is ran after (Pre) Sync updated and Sync updated because of JS asynchronous nature. The second callback in setState will take precedence over ANY code after state is set, thus Async updated will always be after Async before update. With your example you actually proved that mutating prevState = mutating this.state directly, which means prevState is not a clone of the state object.

Two more points to think about:

1. If prevState is indeed a clone of the state object, this will make React inefficient and slow if a component has a huge amount of states or if they are deeply nested. Why? Because then React has to deep clone them to give us a clone prevState which will have negative implications on the performance, and I certainly don't think React is designed to do that.

2. We wouldn't need to use any of the spread operators, Object.assign() or any other way to clone objects/arrays inside our component's state if prevState is in fact a clone of the state object, don't we?

Jeff Wong's answer is correct, the code in the video is directly mutating state which is not recommended. You can read the React documentation yourself https://reactjs.org/docs/react-component.html#setstate, and get a better picture of why https://stackoverflow.com/questions/47339643/is-it-okay-to-treat-the-prevstate-argument-of-setstates-function-as-mutable.

Even if its coded this way

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

it is still updating. Again, leads me to think prevState is not a clone and should not be mutated (i.e. using "+=")

I'm concerned that your result is different to mine, as can be seen in the screenshot below, the counter change doesn't mutate the original state and it is consistent every time the button is pushed.

I think what your demo is showing is the async nature of javascript. As evidenced by the order of the console logs, Pre > Sync > Async... the reason the Sync log is not showing the updated state is because this.setState() is not yet done procccessing while the Async log is in the callback function, therefore displaying the updated state.

I don't see how that proves that mutating prevState is not mutating the actual state; when you are checking the state before setState finishes. If we are looking at the proper way of implementing setState and using prevState, shouldn't we check state AFTER we are sure that setState is done to verify the effects of our implementation to the state. The last two examples I have given does not even return a state object for "counter" yet it was updated, don't you think this proves that mutating prevState mutates the state as well? Which is against the React docs' recommendation

Actually, this code is much better for explaining:

incrementCounter() {
  console.log('(Pre) Sync updated!', this.state.counter)

  setTimeout(() => {
    this.setState((prevState) => {
      console.log('Async before update!', this.state.counter)
      return {
        counter: prevState.counter += 1,
      }
    }, (state) => {
      console.log('Async updated!', this.state.counter)
    })
    console.log('Everything is done! No more execution!', this.state.counter)
  }, 2000)
  console.log('Sync updated!', this.state.counter)
}

I think what he did is modifying the previous state ?

 this.setState( prevState => {
    // modify previous state
    return {
        anyNameWillWork : prevState.players[index].score += delta
   };
});

Without modifying previous state

this.setState( prevState => {
      let newPlayer = Object.assign({}, prevState.players[index]);   // copy at index: 3
      newPlayer.score += delta;   // update score
      return {
        players: [
          ...prevState.players.slice(0, index),  // copy from index 0 to 2
          newPlayer,  // add new at index 3
          ...prevState.players.slice(index+1) // copy the rest from index 4.
        ]
      }
});

Hi there ! The problem with the code below is that it is not updating anything in our Players array, it is creating a new object named Score.

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

if you console.log state, it returns :

{players : [...], score : 1}

The Score does update to the DOM for a mysterious reason, but it's a bug !

It is not safe at all, the data we want to update is within the players array, the best way to do such is to create a new array replacing the player object with an updated score into a copy of Players, and then update State with this new Players array, my code below :

 // this function sets new state
  setNewState = (newState) => {
    this.setState(newState);
  };

  // this function creates a new "players" object with updated score changes, and passes it to setNewState()
  handleScoreChange = (index, score) => {
    const player = this.state.players[index];

    const playerUpdate = { ...player };
    playerUpdate.score = score;

    const newPlayers = [...this.state.players];

    newPlayers[index] = playerUpdate;

    this.setNewState({ players: newPlayers });
  };

I'm reading all the comments here, and just noticed Jeff Wong's code is different from Guil's.

I'm still trying to get my head around on this with my limited knowledge of JS, but I guess Guil's code is totally valid? Because his code is not directly mutating the prevState, instead it's returning a new object as the function is wrapped with ().

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

Also in MDN, they say "Parenthesize the body of a function to return an object literal expression" Link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

I noticed in Jeff's example,

handleScoreChange = (index, delta) => {
  const originalStatePlayers = this.state.players;

  this.setState((prevState) => {
    const prevStatePlayers = prevState.players;
    console.log(originalStatePlayers);
    debugger;
  }   
}

Above is not returning an object like Guil's. I might be totally wrong and lacking some important knowledge about this. So if that's the case, I would like to hear what I am missing..

Cheers