Get a Performance Boost in React with PureComponent

In this article, we’ll interact with some visual learning tools to learn how PureComponent gives you an quick way to optimize your React apps.

You may know that pure components are one of the top-level APIs in the React package, but what does it do?

import React, { PureComponent } from 'react'

class Foo extends PureComponent { // 👈
  render() {
    //...
  }
} 

PureComponent comes with a predefined shouldComponentUpdate lifecycle function that checks whether its props have changed before re-rendering. That means that you could do the same check manually in a regular Component, but PureComponent gives you a handy shortcut.

Let’s take a look at how the standard Component class performs using a visual learning tool.

Using Component

This experimental React app consists of a button that increments an integer, and 3 sub-components (<A1>, <B1>, and <C1>). Both <A1> and <B1> receive a boolean prop isPrime.

import checkPrime from 'is-prime'
import randomColor from 'randomcolor'

class App extends Component {
  state = {
    number: 0
  }

  incrementNumber = () => {
    this.setState({number: this.state.number + 1 })
  }

  render() {
    const isPrime = checkPrime(this.state.number)
    
    return (
      <div>
        <PrimeFinder
          number={this.state.number}
          incrementNumber={this.incrementNumber}  
        />

        <div>
          <A1 isPrime={isPrime}/> 
          <B1 isPrime={isPrime}/>  {/* has several child components  */}
          <C1/>                    {/* doesn't take any props! */}
        </div>
        
      </div>
    );
  }
}

class A1 extends Component { // 👈 using "Component"
  render() {
    return (
      <div style={{backgroundColor: randomColor()}}>  {/* generates a new "background-color" each render*/}
        <p>A1</p>
        <p>isPrime: {this.props.isPrime}</p>
      </div>
    );
  }
}

// <B1> and <C1> are similar...

Whenever the background-color for the sub-components changes that’s a visual indicator that it was re-rendered. How often do you think the sub-components will render?

Try clicking the button!

All of the sub-components re-rendered every time the button is clicked! Huh…


Why is <A1> and <B1> re-rendering even when their isPrime prop isn’t changing? Especially <C1>… it doesn’t even take the isPrime prop! What’s happening here?

How Renders Work in React

By default, rendering in a single component causes all of its sub-components to render also. Even if their props haven’t changed, or like <C1>, when it doesn’t even receive props from its parent component!

This is a facet of React programming that isn’t always well-known, but this is precisely the problem that PureComponent was designed to optimize.

Using PureComponent

Let’s swap out Component for PureComponent in the sub-components (<A1>, <B1>, and <C1>) and see what happens:

import React, { PureComponent } from 'react'

class A1 extends PureComponent {  // 👈 using PureComponent
  render() {
    return (
      <div style={{backgroundColor: randomColor()}}>
        <p>A1</p>
        <p>isPrime: {this.props.isPrime}</p>
      </div>
    );
  }
}

// <B1> and <C1> are similar...

Try clicking on the button!

As the number is incremented, we see that <A1> and <B1> only re-renders when their prop isPrime changes, and <C1> never changes. Awesome! We get the renders only when it’s necessary, and when isPrime didn’t change… nothing happens!

Conclusion

Try using PureComponent in your apps! As we saw through these interactive demos, using it can get you some easy performance wins when it’s thoughtfully used in parts of your app that are susceptible to rendering bottlenecks.

React also provides similar equivalents of PureComponent if you're using React Hooks and functional components

  Tweet It

🕵 Search Results

🔎 Searching...

Sponsored by #native_company# — Learn More
#native_title# #native_desc#
#native_cta#