Will React trigger state update if new provided value is the same? [duplicate]

Question

Does React component do some checking on it's state once this.setState() is called to see if the state has changed. So there will be no reconciliation phase one again after componentDidMount was called like in the code below:

// in constructor
this.state = {width: 0}
...
// in componentDidMount method
this.setState(() => ({ width: 0 }))

or I need to do those checks manually, like:

const width = getViewportWidth()
if (this.state.width !== width) {
  this.setState(() => ({
    width
  }))

Answer 1

By default, React will re-render everytime a component gets passed props or state.

You can do some checking in shouldComponentUpdate and then decide whether to re-render or not.

From the docs:

Use shouldComponentUpdate() to let React know if a component’s output is not affected by the current change in state or props. The default behavior is to re-render on every state change, and in the vast majority of cases you should rely on the default behavior.

shouldComponentUpdate() is invoked before rendering when new props or state are being received. Defaults to true. This method is not called for the initial render or when forceUpdate() is used.

Currently, if shouldComponentUpdate() returns false, then componentWillUpdate(), render(), and componentDidUpdate() will not be invoked.

Returning false does not prevent child components from re-rendering when their state changes.

TLDR; Returning false in shouldComponentUpdate will prevent re-rendering, except when the state actually changed.

Answer 2

setState doesn't compare the previous and current state value, it just set its and a reconcilation is done again.

CodeSandbox that simulates this behaviour

What you can do it implement the shouldComponentUpdate method

Use shouldComponentUpdate() to let React know if a component’s output is not affected by the current change in state or props. The default behavior is to re-render on every state change, and in the vast majority of cases you should rely on the default behavior.

shouldComponentUpdate() is invoked before rendering when new props or state are being received. Defaults to true. This method is not called for the initial render or when forceUpdate() is used.

Returning false does not prevent child components from re-rendering when their state changes.

What you would do is

shouldComponentUpdate(nextProps, nextState) {
     if(this.state.width === nextState.width) {
          return false
     }
     return true;
}