• 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 Reply Cancel reply

0 Comments
Inline Feedbacks
View all comments

Primary Sidebar

Popular

  • Testing Event Listeners In Jest (Without Using A Library)
  • How To Get The Hash of A File In Node.js
  • Which Neural DSP Archetype Plugins Should You Buy?
  • Smoke Detector Randomly Goes Off Early Hours of The Morning
  • How To Mock uuid In Jest
  • Neural DSP Reveal Details About the Long-Awaited Quad Cortex Desktop Editor
  • Deno Raises $21M - but is anyone using it yet?
  • Web 3.0 may have died before it even started
  • NBN Box Installed Inside of Garage, Where Do You Put The Modem?
  • How to Use Neural DSP Archetype Plugins With the Quad Cortex

Recent Comments

  • Jay on Neural DSP Reveal Details About the Long-Awaited Quad Cortex Desktop Editor
  • john on Deno Raises $21M – but is anyone using it yet?
  • Oranges on How To Store Users In Firestore Using Firebase Authentication
  • Precious on Fixing Sequel Pro SQL Encoding Error For Imported SQL Files
  • James on A List of WordPress Gutenberg Core Blocks

Copyright © 2022 · Dwayne Charrington · Log in

wpDiscuz