Using Purecomponent To Prevent Wasted Renders In React

The shouldComponentUpdate lifecycle event in React components provides a way to have more granular control over when a component should re-render as a result of an internal state update, or as dictated by the parent. Earlier this could be done by comparing nextProps with the current props using the now deprecated ShallowCompare addon. React now has support for PureComponent to achieve the same thing.

Lets say you have a child component that simply displays a text prop passed to it:

And you have another child component that displays another text prop passed to it and logs “Rendering” to the console for each render cycle pass:

The common parent to these children updates a state text every 1 second and passes it as a prop to the first child:

This periodic state update in turn causes re-renders for both the child components. Ideally, second child should not be affected by the parent state update at all, since the prop passed remains the same. Console log by running this code:

Rendering!
Rendering!
Rendering!
...


This could be solved by using a PureComponent to implement the second child:

Console log with modified code:

Rendering!


Working example for this can be found here.

PureComponent does a shallow check on this.props and nextProps automatically to determine if it should update. Note that if the passed prop changes deeply, PureComponent will not be able to catch it. In that case you should do a deep equality check (maybe use underscorejs for it):

shouldComponentUpdate(nextProps, nextState) {
  return !_.isEqual(this.props, nextProps) || !_.isEqual(this.state, nextState);
}


Or you could use ImmutableJS too.