React shouldComponentUpdate()

  1. Should I use shouldComponentUpdate?

shouldComponentUpdate() is one of React lifecycle functions.

Syntax:

1
2
3
4
5
6
7
8
9
/**
 * Called to determine whether the change in props and state should trigger a re-render.
 * @param {Object} nextProps
 * @param {Object} nextState
 * @return boolean - Defaults to true
 */
shouldComponentUpdate(nextProps, nextState) {
  return true;
}

The default behavior is to re-render the component every time when its props or state changes. Most of the time we 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.

This method only exists as a performance optimization. Do not rely on it to “prevent” a rendering, as this can lead to bugs. The ReactJS official documentation recommends using the built-in PureComponent instead of writing shouldComponentUpdate() by hand. PureComponent performs a shallow comparison of props and state, and reduces the chance that you’ll skip a necessary update.

If you are confident you want to write it by hand, you may compare this.props with nextProps and this.state with nextState and return false to tell React the update can be skipped. Note that returning false does not prevent child components from re-rendering when their state changes.

Doing deep equality checks or using JSON.stringify() in shouldComponentUpdate() is not recommended. It is very inefficient and will harm performance.

Currently, if shouldComponentUpdate() returns false, then UNSAFE_componentWillUpdate(), render(), and componentDidUpdate() will not be invoked. In the future React may treat shouldComponentUpdate() as a hint rather than a strict directive, and returning false may still result in a re-rendering of the component.

Should I use shouldComponentUpdate?

There are rare cases that you need the use of shouldComponentUpdate. The reason is that React rendering is already fast by default.

In general, this method is rarely used. Or if you really need it, you should implement PureComponent so React can maintain it for you.