You are already aware of the fact React.js is fast, but did you know there is a way to speed up the rendering of React components even more?
Say hello to my little friend PureRenderMixin
The PureRenderMixin does a shallow comparison on our props and state values. It compares the existing value of prop or state to new values.
Behind the scenes the PureRenderMixin is extending the lifecycle method shouldComponentUpdate. It determines if the render method is callable and your component will re-render.
Why you should use PureRenderMixin
The PureRenderMixin can save you a whole bunch of time because it means you don’t have to worry about littering your components with if statements to check if anything has changed, the mixin handles everything behind the scenes for us automatically.
The mixin in simple terms is doing a check like this:
shouldComponentUpdate: function() {
return !!(this.props === nextProps);
}
As you can see in this JSPerf test, using the PureRenderMixin results in far greater performance than not using it.
Limitations of PureRenderMixin
As per the documentation, it does not compare deeply nested data structures. So if you supply an object to a property, it will not update and call the render function when you expected it too. Unless of course your data structure is immutable which you can use React’s immutability helpers.
You also cannot render dynamic markup. The PureRenderMixin expects the same props/state and markup being rendered inside of your render method. This is why the plugin is called “PureRender” because it expects the render method to always be the same.