When should we use the appropriate way to set state?

** update **
Woops, 😅 I didn't catch that #explainlikeim5 tag...

Hi Brian,

Those two examples are actually recommended ways.
From what I read from docs, following examples are the wrong ways.

Do Not Modify State Directly

// Wrong
this.state.comment = 'Hello';

👆 is wrong because (short answer is that) React would not know whether this.state.comment is updated without this.setState(...).

Longer answer is due to React tracks state changes (Reconciliation).

A state is an object, thus a reference type. Checking whether each state in each object for all components in React tree would be prohibitively slow. So when you are doing this.setState({comment: 'Hello'}), you are basically setting a new reference for this.state and alerting React to queue the changes for render later.

When you do this.state.comment = "Hello", you didn't change the reference of this.state but only the value pointed by the reference thus React would not know that the state has changed.

State Updates May Be Asynchronous

// Wrong
this.setState({
  counter: this.state.counter + this.props.increment,
});

For this case, while you are changing counter state within this.setState, either this.state.counter & this.props.increment could have a difference value from the time you tried to set the counter value.

Suppose that in your code

// at the time you are calling `this.setState`
// `this.state.counter` is 1
// and `this.props.increment` is 1
this.setState({
  counter: this.state.counter + this.props.increment,
});

As setState is asynchronous, when React is trying to apply the setState, values for this.state.counter or/and this.props.increment (such as 2, 3, etc) could have changed by external event/side effects (e.g. setInterval, mouse, keyboard events, etc).

When you use the "correct" callback version,

// Correct
this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

React knows what the previous state & props were and gives you the snapshot of those values, thus no need to worry about it being changed elsewhere.

I could be missing something or wrong somewhere.

If so, would anyone kindly point out my mistakes? 🙂 Thanks.