React.Component vs React.PureComponent

Question

The official React docs state that "React.PureComponent's shouldComponentUpdate() only shallowly compares the objects", and advises against this if state is "deep".

Given this, is there any reason why one should prefer React.PureComponent when creating React components?

Questions:

• is there any performance impact in using React.Component that we may consider going for React.PureComponent?
• I am guessing shouldComponentUpdate() of PureComponent performs only shallow comparisons. If this is the case, can't said method be used for deeper comparisons?
• "Furthermore, React.PureComponent's shouldComponentUpdate() skips prop updates for the whole component subtree" - Does this mean that prop changes are ignored?

Question arose from reading into this medium blog, if it helps.

Answer 1

The major difference between React.PureComponent and React.Component is PureComponent does a shallow comparison on state change. It means that when comparing scalar values it compares their values, but when comparing objects it compares only references. It helps to improve the performance of the app.

You should go for React.PureComponent when you can satisfy any of the below conditions.

• State/Props should be an immutable object
• State/Props should not have a hierarchy
• You should call forceUpdate when data changes

If you are using React.PureComponent you should make sure all child components are also pure.

is there any performance impact in using React.component that we may consider going for React.PureComponent?

Yes, it will increase your app performance (because of shallow comparison)

I am guessing shouldComponentUpdate() of Purecomponent performs only shallow comparisons . If this is the case can' t the said method used for deeper comparisons?

You guessed it correctly. You could use it if you satisfy any of the conditions I mentioned above.

"Furthermore, React.PureComponent's shouldComponentUpdate() skips prop updates for the whole component subtree" - Does this mean that prop changes are ignored?

Yes, prop changes will be ignored If it couldn't find difference in shallow comparison.

Answer 2

Component and PureComponent have one difference

PureComponent is exactly the same as Component except that it handles the shouldComponentUpdate method for you.

When props or state changes, PureComponent will do a shallow comparison on both props and state. Component on the other hand won’t compare current props and state to next out of the box. Thus, the component will re-render by default whenever shouldComponentUpdate is called.

Shallow Comparison

When comparing previous props and state to next, a shallow comparison will check that primitives have the same value (eg, 1 equals 1 or that true equals true) and that the references are the same between more complex javascript values like objects and arrays.

Source: https://codeburst.io/when-to-use-component-or-purecomponent-a60cfad01a81

Answer 3

The main difference, as I see it, is that a component rerenders every time its parent rerenders, regardless of whether the component's props and state have changed.

A pure component, on the other hand, will not rerender if its parent rerenders, unless the pure component's props (or state) have changed.

For example, lets say that we have a component tree with a three-level hierarchy: parent, children and grandchildren.

When the parent's props are changed in a way that the props of only one child are changed, then:

• if all components are regular components, then the entire component tree will rerender
• if all children and grandchildren are pure components, then only one child will rerender, and one or all of its grandchildren, depending on whether their props are changed. If there are many components in this component tree, it may mean a significant performance boost.

Sometimes, however, using pure components will not have any impact. I had such a case when the parent received its props from a redux store and needed to perform a complex calculation of its children's props. The parent used a flatlist to render its children.

The outcome was that every time there was even a small change in the redux store, the entire flatlist array of the childrens' data has been recalculated. This meant that for every component in the tree, the props were new objects, even if the values didn't change.

In this case, pure components don't help, and the performance boost can be achieved only by using regular components and checking in the children, in shouldComponentUpdate, if a rerender is needed.