• 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

  • Thoughts on the Flipper Zero
  • I Joined Truth Social Using a VPN and Editing Some HTML to Bypass the Phone Verification
  • How To Install Eufy Security Cameras Without Drilling or Using Screws
  • How To Get The Hash of A File In Node.js
  • Wild Natural Deodorant Review
  • The Most Common iPhone Passcodes (and how to guess them)
  • Neural DSP Reveal Details About the Long-Awaited Quad Cortex Desktop Editor
  • NBN Box Installed Inside of Garage, Where Do You Put The Modem?
  • Improving The Coopers Australian Pale Ale Extract Tin (and other tips)
  • How to Record With the Neural DSP Quad Cortex in Reaper (DI and USB Recording)

Recent Comments

  • CJ on Microsoft Modern Wireless Headset Review
  • Dwayne on Microsoft Modern Wireless Headset Review
  • CJ on Microsoft Modern Wireless Headset Review
  • john on Microsoft Modern Wireless Headset Review
  • Dwayne on Why You Should Be Using globalThis Instead of Window In Your Javascript Code

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz