React Pure Components

Restrict the re-rendering when the state and props are value same.

Extend a class with Pure Component.

Run this below code and see the difference in console.

App.js file code

import { createContext, useState } from 'react';

import './App.css';

import PureComponentExample from './Pages/PureComponent';

import NormalComponentExample from './Pages/NormalComponent';

function App() {

  return (

    <div className="App">

        <NormalComponentExample />

        <PureComponentExample />

    </div>

  );

}

export default App;

Pages/PureComponent.js file code

import React, { PureComponent } from 'react';

class PureComponentExample extends PureComponent {

    constructor() {

        super();

        this.state = {

            count: 5

        }

    }

    render() {

        console.log("PureComponent : ", this.state);

        return (

            <>

                <h3>PureComponent Example : {this.state.count}</h3>

                <button onClick={() => { this.setState({ count: 10 }) }}>Click</button>

            </>

        );

    }

}

export default PureComponentExample;

Pages/NormalComponent.js file code

import React, { Component } from 'react';

class NormalComponentExample extends Component {

    constructor() {

        super();

        this.state = {

            count: 5

        }

    }

    render() {

        console.log("NormalComponent : ", this.state);

        return (

            <>

                <h3>NormalComponent Example : {this.state.count}</h3>

                <button onClick={() => { this.setState({ count: 10 }) }}>Click</button>

            </>

        );

    }

}

export default NormalComponentExample;