Reactjs Pure Component With Example

Hello Guys,

In this tutorial we are learning about pure component. different between component and pure component is ones you assign state value then when you update state with different value then call render() method otherwise render() was not call.

React.PureComponent is similar to React.Component. The difference between them is that React.Component does not implement shouldComponentUpdate(), but React.PureComponent implements it with a shallow prop and state comparison.

If your React component’s render() function renders the same result given the same props and state, you can use React.PureComponent for a performance boost in some cases.

Pure Component Example

In following example you can see first we assing count state value then on button click we change state value after you click on button but you can see in console render() method no call. and also we extends PureComponent.

/src/App.js file

import React, { Component,PureComponent } from 'react';
import './App.css';
import User from './User';

class App extends PureComponent{

  constructor(){
    super();
    this.state={
      count:10
    }
  }

  render(){
    console.warn('render');
    return (
      <div className="App">
        <header className="App-header">
          <h1>Pure Component State Count {this.state.count}</h1>
          
          <button onClick={()=>{this.setState({count:20})}}>Update Count</button>
        </header>
      </div>
    );
  }

}

export default App;

I hope it can help you...