Reactjs Pure Component With Example

Share Me
  •  
  •  
  •  
  • 1
  •  
  •  
  •  
  •  
  •  
  •  
  •  
    1
    Share

Today now in this tutorial i will talk with you about pure component. Here we know that the different between component and pure component is ones. we can assign state value then when also we update the state also with the different value then we can call render() method otherwise the render() was not call.

React.PureComponent is most similar to React.Component. So the difference between them is that React.Component can not implement shouldComponentUpdate(), but the React.PureComponent implements it also with a shallow prop and aslo state comparison.

So If our React component’s is render() function then the renders is the same result will be given the same props and state, so we can use React.PureComponent for a performance boost in some cases.

Pure Component Example

Now in following example we will see first we assign count state as value then also on button click. Here we can change the state value after we click on button but we can also 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;

Read Also: What is componentDidUpdate in Reactjs With Example
I hope it will help you. Also you can follow us on Facebook

About code chef

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by code chef →