Should I use React.PureComponent everywhere?

Question

React says a clean render can optimize performance. And now React has a PureComponent. Should I use React.PureComponent everywhere? Or when to use React.PureComponent and where is the right position to use React.PureComponent?

Answer 1

You should use it whenever possible. This will significantly reduce rendering time if you have many cases where root-level components are updated, and children do not need it. In doing so, you will get much more from using PureComponent in your root nodes (i.e. PureComponent will not improve overall performance as in sheet-level components, since it only saves the render from this component).

Some PureComponent warnings are very well explained in valid documents.

React.PureComponent shouldComponentUpdate () only finely compares objects.

You may accidentally skip rendering updates if your support changes deeply in a nested object. PureComponent is only good with simple flat objects / props or using something like ImmutableJS to detect changes in any object with a simple comparison.

In addition, React.PureComponent shouldComponentUpdate () skips updates for the entire subtree of the component. Ensure that all child components are also "clean."

PureComponent only works when the rendering of your component is dependent on props and status. This should always be in the case of a reaction, but there are some examples where you need to re-visualize outside the normal response life cycle. For PureComponent to work properly (skipping re-rendering that you really don't need), each descendant of your PureComponent must be "clean" (it depends only on props and state).