In a recent article, I talked about how to avoid multiple re-rendering in React by using shouldComponentUpdate.
Using React shouldComponentUpdate() lifecycle method is a valid option, but there is a better way.
That’s by using the React Pure Component class instead of a regular React Component class.
The biggest difference between React pure component vs a regular React component is that a React component doesn’t implement shouldComponentUpdate() by default.
On the other hand, React pure component does implement shouldComponentUpdate() by default, and by performing a shallow comparison on React state and props values.
In a recent article, I showed an example of how to create a pure like component using the regular React component class with the shouldComponentUpdate lifecycle method.
We’re gonna reduce this code to 5 lines by using React Pure Component.
It’s that simple to use.
Only use React pure component when the React component won’t be mutated by state or props.
Also, if you plan to use React children components inside your pure component, make sure those children components are pure as well.
That’s because any children components inside a pure component will not get re-render.
To see the full example go here: GitHub link