Original link:Codeburst. IO/the when – to – use…

Too long to look at: Prefer PureComponent to Component, but never change your object

When to use Component or PureComponent

I chose to use PureComponent for a while because it was a higher-performance version of Component, but performance improvements come with strings attached. Let’s take a closer look at PureComponent and understand why we should use it.

Component differs from PureComponent in one way

PureComponent is essentially the same as Component, except that it handles the shouldComponentUpdate method. When the props or state changes, the PureComponent makes a shallow comparison between the props and state. Component, on the other hand, does not do this comparison. Therefore, every time shouldComponentUpdate is called, the component will default to render again.

Light is 101

When comparing old and new versions of props and state, shallow comparisons check whether primitives have the same values (e.g., 1 === 1 or true equals true) and compare references between objects or arrays.

Never change

You’ve probably heard that don’t change objects and arrays in props and state, and if you change objects in the parent component, your “pure” child component will not update. Although the stream has changed these values, the child component will compare references to the former props and will not detect the difference.

Therefore, when you need to make changes, use the ASSIGN method of the ES6 object or the spread extension of the array, or use a third-party library, to force the return of the new object.

Will there be performance issues?

Comparing a primitive value type to an object reference type is a very simple operation. If you have a list of child objects and one of them is updated, it is much cheaper to do a comparison check for props and state than to freshrender each child object.

Other things to watch out for

Do not bind values in the Render method

You might have a list of items where each item passes a unique argument to the parent method. To bind each argument, you might do something like this:

The problem is that every time the render method of the parent component is called, a new method is created and passed into likeComment. A side effect of changing the child components is to cause them to be re-rendered, even though the data itself has not changed.

To solve this problem, just pass a reference to the parent component’s prototype method to the child component. The likeComment property of a child component will always have the same reference and will not cause unnecessary re-rendering.

Then create a class method in the child component that references the passed property:

Do not derive data in the Render method

Consider that the Profile component has a list of articles, and you need to show 10 of your users’ favorites.

TopTen will have a new reference every time the component is re-rendered, although the posts will remain the same and the data will remain the same. This will result in unnecessary re-rendering.

Storing derived data can solve this problem by, for example, setting the data in the state of the component and only updating when posts are updated.

If you use Redux, consider using ResELECT to create “selectors” to compose and store derived data.

conclusion

Using PureComponent is safer than Using Component by following two rules: 1) Variability is generally bad, and using PureComponent makes the problem worse. 2) If you create methods, objects, or arrays in the Render method, you are probably doing something wrong.