Pure Render Element Rendering With No Changes ReactJS

- 1 answer

Here is the code example:

If you open up the console and type into any of the input fields, you will notice that the render method for the FormTextbox component that has changed is the only one that is called however the render method of all ten of the FormElement components are called even though only one of them had a child that changed.

Why would the render method of all FormElement components be called when 9 of them did not have any changes and it is using the Pure Render Mixin (and the child component also using the Pure Render Mixin)?



I believe this works as expected because you are composing components. PureRender works by checking that props are identical; however, since you are passing using props.children, the prop equivalence check will fail (object/array equivalency in JavaScript is a tricky business), and thus the component is re-rendered. Its subtree is not updated as it has primitive props which have not changed.

For proof, check out this updated Pen where I explicitly override shouldComponentUpdate. Indeed you will see in the logs that the comparison this.props.children == nextProps.children is false.

From the PureRender Docs:

This only shallowly compares the objects. If these contain complex data structures, it may produce false-negatives for deeper differences.

(emphasis mine)