Pure Component ReactJS

In this article, we will learn about pure component in ReactJS. We can create a class component by extending the component class from react. There is a second way to create a class component and that is by extending the pure component class from react. Let’s take a look at an example.

Example : To create pure components

import React, { PureComponent } from 'react';
class purecom extends PureComponent {
    render(){
        return( 
            <div>
                Pure Component
            </div> 
        )
    }
}

1. In the above code, we have imported the PureComponent from ‘react’ and we have created a class component by extending the pure component from the Component.
2. And the component returned the text “Pure Component”.
3. See the output, the text is displayed successfully. There is nothing new or different when compared to the regular component class.

Pure component vs Regular component Demo

I show the simple demo that involves both classes. For this demo, I need a regular and pure component and a containing parent component that is capable of changing its state. By now this should be pretty straightforward so let’s quickly get it done.

Pure component  : (purecom.js)

import React, { PureComponent } from 'react';

class purecom extends PureComponent {
    render(){
        console.log('Pure Component')
        return( 
            <div>
                Pure Component {this.props.name}
            </div> 
        )
    }
}

export default purecom;

We have created pure components. Now we are going to create a Regular component. Here, {this.props.name} is the value of the parent component.

Regular component: (Regcom.js)

import React, { Component } from 'react';

class Regcom extends Component {
    render(){
        console.log('Regular Component')
        return( 
            <div>
                Regular Component {this.props.name}
            </div> 
        )
    }
}

export default Regcom;

We have created pure components. Now we are going to create a Parent component. Here, {this.props.name} is the value of the parent component.

Parent component: (parcom.js)

import React, { Component } from 'react';
import Regcom from './Regcom';
import Purecom from './purecom';

class Parentcom extends Component {
  constructor(props){
    super(props)
     this.state = {
        name:'John'
    }
  }

  componentDidMount(){
    setInterval(() => {
        this.setState({
            name:'john'
        })
    }, 2000)
  }
    render(){
        console.log('******* Parent Component *******')
        return( 
            <div>
                Parent Component
                <Regcom name={this.state.name} />
                <Purecom name={this.state.name} />
            </div> 
        )
    }
}

export default Parentcom;

Steps:

1. We have created parent component. And also we have created a new state property called “name” and set it to “john’.
2. Then we added the component Didmount lifecycle method and within the body we created a timer setInterval() method. The setInterval() accepts two arguments the first is function, we set it to an arrow function and the second argument is interval, we set into 2second. Within the first argument arrow function body, we called setState() but we set name property to ‘john’ again.
3. Then we returned the Regular and pure component in the JSX passing in name as a prop.
4. Now let’s include this name prop in the regular and pure component like {this.props.name}
5. See the below-expected output. parent, regular, and pure component is displayed.

Console output:

And then see the console, the render method logs. Initially, we have parent render next regular component render, and then pure component render. But after that every 2 seconds the setState method is called which will rerender the parent component. If the parent component rerenders the child component we also rerender unless, of course, you return false from shoulComponentUpdate method. So, you should see the render() method from both regular and pure components being logged. However, we see that it is not the case, every 2sec parent and regular component are rerendered but the pure component is never rerendered. This is the difference between the regular component class and the pure component class.