React.PureComponent is similar to React.Component. The difference between them is that React.Component doesn’t implement shouldComponentUpdate(), but React.PureComponent implements it with a shallow prop and state comparison.
If your React component’s render() function renders the same result given the same props and state, you can use React.PureComponent for a performance boost in some cases.
Note
React.PureComponent’s shouldComponentUpdate() only shallowly compares the objects. If these contain complex data structures, it may produce false-negatives for deeper differences. Only extend PureComponent when you expect to have simple props and state, or use forceUpdate() when you know deep data structures have changed. Or, consider using immutable objects to facilitate fast comparisons of nested data.
Furthermore, React.PureComponent’s shouldComponentUpdate() skips prop updates for the whole component subtree. Make sure all the children components are also “pure”.
https://betterprogramming.pub/when-to-use-react-purecomponent-723f85738be1
When to Use React.PureComponent
Let’s say that we have a child component,This component receives props from its parent. We want this component to re-render whenever it receives new props. But what if its parent is tracking different kinds of states? Will the parent component trigger a re-render of the child component even if the child’s received props did not change?
What’s Under the Hood?
The big difference between Component and PureComponent is that PureComponent automatically implements the shouldComponentUpdate() lifecycle 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.
So, there you have it — as our console.log() experiment shows, the default behavior of our components is to re-render on every state change. shouldComponentUpdate() is a checkpoint before this automatic re-rendering, evaluating whether the change in state has anything to do with the component at hand.
Yes, you can implement shouldComponentUpdate() manually, but PureComponent does this implicitly, and sometimes it’s exactly what you're looking for. You could see how switching dozens of stateful children to extending PureComponent could prevent lots of unnecessary re-renders.
https://reacttraining.com/blog/react-inline-functions-and-performance/#strict-equality-comparison
This is where the real meat of the problem lives. You can see real performance improvements by understanding two things: shouldComponentUpdate and JavaScript strict equality comparisons. If you don’t understand them well, you can inadvertently make your React code harder to work with in the name of performance.
When you call setState, React will compare the old React elements to a new set of React elements (this is called reconciliation, you can read about it here) and then use that information to update the real DOM elements. Sometimes that can get slow if you’ve got a lot of elements to check (like a big SVG). In these cases, React provides an escape hatch called shouldComponentUpdate.
If your component has shouldComponentUpdate defined, before React compares the old and new elements,it will ask shouldComponentUpdate if anything changed. If it returns false, then React will completely skip the element diff, saving some time. If your component is large enough, this can have considerable impact on performance.
The most common way to optimize a component is to extend React.PureComponent instead of React.Component. A PureComponent will diff your props and state in shouldComponentUpdate so you don’t have to.
Avatar will now use a “strict equality comparison” on its props and state when being asked to update, hopefully speeding things up.
strict equality comparison
There are six primitive types in JavaScript: string, number, boolean, null, undefined, and symbol. When you do a “strict equality comparison” on two primitives that hold the same value, you’ll get true. For example:
When PureComponent diffs props it uses a strict equality comparison. This works out great for inlined primitive values:
The prop diffing problem arises because of non-primitive types — err, excuse me, type. There is only one other type and that’s Object. What about functions and arrays you say? Well, actually those are just objects.
(Functions are regular objects with the additional capability of being callable.) https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures