React.PureComponent - children vs custom properties

Can I use the children property with React.PureComponent, or do I have to use only custom properties?

TLDR; You can use children with React.PureComponent as long as you use your component carefully. It is much easier to make a "mistake" with children.

Overview

Pure Components were introduced to facilitate limiting the re-rendering after component properties/state update. They do this by using a shallow equality comparison inside shouldComponentUpdate(), see the official React documentation This comparison is used for every property, including children property as well as component internal state.

Example

Here's an example with different implementations that use React.Component or React.PureComponent as a base class.

Components used in this example:

• PureWithChildren - React PureComponent, which uses the children property
• PureWithLabel - React PureComponent, which uses the label property
• RegularWithChildren - React Component, which uses the children property
• RegularWithLabel - React Component, which uses the label property

Regular React.Component is re-rendered each time it receives new properties, even if they are equal to old. On the other, hand React.PureComponent is re-rendered only if new properties are different from the old ones.

Description

The above example shows that using PureComponents is much easier when they have custom properties such as label instead of the generic children property. This is especially important if we look at interpolated strings. For the label property it works expected, but in the case of children additional renders may surprise the developer. The reason for this behavior is that children are passed as an array while label is simply a string (interpolated but still a string). Arrays are not shallow equal to each other and therefore children are always re-rendered despite the lack of changes.

React.PureComponent can be used with the children property, but with caution (probably along with some type checking using Flow/Typescript/PropTypes). The above example can be refactored to prevent problematic array values for children by adding:

PureWithChildren.propTypes = {
  children: PropTypes.string
};

Then the correct component usage would be:

<PureWithChildren>{`string ${data}`}</PureWithChildren>

Sources

Official documentation for React.PureComponent: https://reactjs.org/docs/react-api.html#reactpurecomponent

Other interesting posts on this topic: https://blog.cloudboost.io/react-purecomponents-children-979e3da15ba8 https://medium.com/@antonkorzunov/2-things-about-purecomponent-you-probable-should-know-b04844a90d4 https://blog.shakacode.com/react-purecomponent-pitfalls-d057882f4b6e