React.js Pure Component

A PureComponent does a shallow comparison on state change. It means that when comparing scalar values it compares their values, but when comparing objects it compares only references. It helps to improve the performance of the app.
What is the need of Pure Component?

Whenever the state of any component changes (using setState method), it will call the "render" method again which re-render the view or you can say refresh the view.

As we all know that the re-rendering approach of the react component (when the state changes) is one of the best feature of react.js, but sometimes this feature generates performance issue for react applications.

Let's understand by following example.

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

class App extends Component {
  constructor(props) {  
      super(props);          
      this.state = {  
         title: "Full Stack Tutorials",  
      }  
   } 

  componentDidMount(){
       setInterval(()=>{
           this.setState(()=>{
               return { title: "Full Stack Tutorials" }
           })
       },1000)
   }

  render() {
    console.log('rendering app');
    return (
      

title: {this.state.title}

); } } export default App;

In componentDidMount method, I have used the setInterval method that will repeat the interation every second and use the "setState" method of component.

The "setState" method calls the "render" function of the component and re-render the view of the component.

Since there was not any actual change happened with current and nextState, besides that it calling the render method of the component at every second.

Does it really make any sense?

There are two ways to resolve this issue.
  1. shouldComponentUpdate()
  2. PureComponent
1. shouldComponentUpdate

We can achive this manually by using React Component Lifecycle Method - shouldComponentUpdate(nextProps, nextState). it compares current state with nextState and current props with nextProps and if find any actual changes then it return boolean true which re-render the component.

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

class App extends Component {
  constructor(props) {  
      super(props);          
      this.state = {  
         title: "Full Stack Tutorials",  
      }  
   } 

  componentDidMount(){
       setInterval(()=>{
           this.setState(()=>{
               return { title: "Full Stack Tutorials" }
           })
       },1000)
   }
   
   shouldComponentUpdate(nextProps, nextState){
     return (this.state.title === nextState.title ? false :true)
   }

  render() {
    console.log('rendering app');
    return (
      

title: {this.state.title}

); } } export default App;
2. PureComponent

Whenever the state or props of the component changes, Pure Component does a shallow comparison and checks automatically that the component will re-render or not.

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

class App extends PureComponent {
  constructor(props) {  
      super(props);          
      this.state = {  
         title: "Full Stack Tutorials",  
      }  
   } 

  componentDidMount(){
       setInterval(()=>{
           this.setState(()=>{
               return { title: "Full Stack Tutorials" }
           })
       },1000)
   }

  render() {
    console.log('rendering app');
    return (
      

title: {this.state.title}

); } } export default App;

Pure Component has performance improvements and render optimizations since React automatically implements this for us with a shallow comparison for props and state.