Pure Component in React JS

React JS

Today we will discuss about Pure Component in React JS. Basically pure component is used to prevents un-necessary re-rendering of component.

In React JS we use shouldComponentUpdate method to prevents un-necessary re-rendering of component. Later on React introduce pure component to prevents un-necessary re-rendering of component. We can say pure component provides the in-built functionality of shouldComponentUpdate method.

If we have used pure component in our application then no need to use shouldComponentUpdate method in React JS.

ShouldComponentUpdate

The shouldComponentUpdate is a react life cycle method. It prevents the un-necessary re-rendering of component. This method compare the old state/props with new state/props then return the boolean value. The default value of shouldComponentUpdate is true.
Example-

import React, { Component } from 'react'

class ShouldComponentUpdateExample extends Component {

    state = {
        tutorial: 'React JS Tutorial',
    }

    handleOnClick = () => {
        this.setState({ tutorial: 'React JS Tutorial' })
    }

    render() {
        const { tutorial } = this.state
        console.log('Render component')
        return (
            <div>
                <p>Tutorial is <b>{tutorial}</b></p>
                <button onClick={this.handleOnClick}>
                    Click me
                </button>
            </div>
        )
    }
}

export default ShouldComponentUpdateExample
shouldComponentUpdate in React JS

In the above code we have changed the same value of state on the button click. The value of state doesn’t change but page have re-rendered many times same as how many clicks on button. Now we will use shouldComponentUpdate method to prevent re-rendering like as below example.

import React, { Component } from 'react'

class ShouldComponentUpdateExample extends Component {

    state = {
        tutorial: 'React JS Tutorial',
    }

    shouldComponentUpdate(nextProps, nextState, nextContext) {
       return false;
    }

    handleOnClick = () => {
        this.setState({ tutorial: 'React JS Tutorial' })
    }

    render() {
        const { tutorial } = this.state
        console.log('Render component')
        return (
            <div>
                <p>Tutorial is <b>{tutorial}</b></p>
                <button onClick={this.handleOnClick}>
                    Click me
                </button>
            </div>
        )
    }
}

export default ShouldComponentUpdateExample

In the above code we have return the false value in sholudComponentUpdate method. When we click on the button to change the state then page doesn’t re-render because we have return the false in sholudComponentUpdate method. Now we will see shouldComponentUpdate based in condition like as below code.

import React, { Component } from 'react'

class ShouldComponentUpdateExample extends Component {

    state = {
        tutorial: 'React JS Tutorial',
    }

    shouldComponentUpdate(nextProps, nextState, nextContext) {
        if(this.state.tutorial !== nextState.tutorial) {
            return true
        } else {
            return false
        }
    }

    handleOnClick = () => {
        this.setState({ tutorial: 'React JS Tutorial' })
    }

    render() {
        const { tutorial } = this.state
        console.log('Render component')
        return (
            <div>
                <p>Tutorial is <b>{tutorial}</b></p>
                <button onClick={this.handleOnClick}>
                    Click me
                </button>
            </div>
        )
    }
}

export default ShouldComponentUpdateExample

In the above code we have used shouldComponetUpdate method to compare the old state and new state then render the component based on the condition. If it returns true then page will re-render otherwise page doesn’t not re-render.

Now we will see example of pure component.

import React, { PureComponent } from 'react'

class PureComponentExample extends PureComponent {

    state = {
        tutorial: 'JavaScript Tutorial',
    }

    handleOnClick = () => {
        this.setState({ tutorial: 'JavaScript Tutorial' })
    }

    render() {
        const { tutorial } = this.state
        console.log('Render component')
        return (
            <div>
                <p>Tutorial is <b>{tutorial}</b></p>
                <button onClick={this.handleOnClick}>
                    Click me
                </button>
            </div>
        )
    }
}

export default PureComponentExample

In the above code we have used pure component. This page doesn’t re-render because we have update the state with same value i.e. value of the state doesn’t change. So page will not re-render because pure component automatically find the state has been changed or not. If the value of the state change with the old value then page will re-render. Like as below example.

import React, { PureComponent } from 'react'

class PureComponentExample extends PureComponent {

    state = {
        tutorial: 'JavaScript Tutorial',
    }

    handleOnClick = () => {
        this.setState({ tutorial: 'React JS Tutorial' })
    }

    render() {
        const { tutorial } = this.state
        console.log('Render component')
        return (
            <div>
                <p>Tutorial is <b>{tutorial}</b></p>
                <button onClick={this.handleOnClick}>
                    Click me
                </button>
            </div>
        )
    }
}

export default PureComponentExample

In the above code we have changed the value of state on the button click then page will re-render because state has been changed. Same as in child component, pure component compare the old props with the new props. If the value of the new props different with the old props then child component will re-render.

So using this tutorial anyone can easily understand about Pure Component in React JS.

If you want to add something or improve this tutorial or find anything wrong or incorrect then please leave a message using below comment box.

1 thought on “Pure Component in React JS

Leave a Reply

Your email address will not be published. Required fields are marked *

1 × 1 =