What is purecomponent in react

Purecomponent, as the name suggests, is a component which has same output for a given prop and state.  When our React component are pure(as stated above), we can use PureComponent to have the performance gain.

TL;DR

• PureComponent has shouldComponentUpdate function overriden. This function does shallow comparison of the props and state. Due to this unnecessary renders are prevented.
• PureComponent works fine when your component is "pure" - you are not mutating the data
• If you mutate the date (see example 3), the PureComponent will not render as it does only shallow comparison. Therefore use immutable js, or be sure to change the reference of object (using Object.assign, or clone) before changing its property.

Context to understanding purecomponent

Normally, the react component re-renders whenevery there is a change in state or props. If you do not want to re-render everytime there is a change, you can override a function called shouldComponentUpdate . This function is called before every time the render function is called.

shouldComponentUpdate should return a boolean. If it is true, component renders. As shown in the code below, the component will never render as we are returning false.

import React, { Component } from 'react';

class PureComponentTest extends Component{

  shouldComponentUpdate(){
    // as return false
    return false;
  }

  render(){
    return(
      <div>Will this render? No</div> 
    )
  }
}

PureComponent is a helper class, which has its own implementation of shouldComponentUpdate. If you are using PureComponent, you cannot override shouldComponentUpdate.

How does PureComponent work?

PureComponent's shouldComponentUpdate shallowly compares the props and state of the component, and returns true only if it is changed. Because of this, there are no unnecessary re renders if the prop and state is same, and performance is increased.

The comparison performs a shallow comparison check on props and state. For objects, it iterates through the keys of object and checks for equality of the value (with previous value). It returns true if the comparison of props or state with previous props and state fails, and therefore it renders the component.

Here is a working example of PureComponent which demonstrates its performance advantage.

We pass the same props to a normal component, and to a pure component. The pure component only renders 1 time, the first time it receives props. The normal component keeps on re-rendering, even though the prop value is same.

Click here for sample code for the above example

Let us see some examples to understand if the PureComponent will build or not

Example 1 - How PureComponent prevents unnecessary rendering

If current props/state is

{
  name: 1
}

and next props/state is

{
  name: 1
}

Then the pure component will not build as value of name is same.

Example 2

If current props/state is

{
  name: '1'
}

and next props/state is

{
  name: 1
}

Then the pure component will build as value of name is changed ( '1' !== 1)

Example 3 (false positive)

Lets see an example where we do not change the reference of object, and due to that even if the prop/state is changed, the PureComponent does not update.

Current state is

state = {
  counter: {
    no: 1
  }
}

You update this state by mutating the data, but not changing the reference.

const { counter } = this.state;
counter.no = counter.no + 1;
this.setState({
  counter: counter
})

Due to this, the counter.no is changed, but the counter object has reference to previous object.

So the Normal Component  will render. But PureComponent will not render as it does shallow comparison.

In order to fix it, change the reference of object counter before changing its property no.

const { counter } = this.state;
const { no } = counter
this.setState({
  counter: {
    no: no+1
  }
})