• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

Understanding The React.js PureRenderMixin

React.js · October 24, 2015

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.

Dwayne

Leave a ReplyCancel reply

0 Comments
Inline Feedbacks
View all comments

Primary Sidebar

Popular

  • Handling Errors with the Fetch API
  • How To Get The Hash of A File In Node.js
  • Testing Event Listeners In Jest (Without Using A Library)
  • The Quad Cortex Desktop Editor is Finally Announced
  • How To Paginate An Array In Javascript

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz