React JS Pure Component And Demo

A React component can be considered pure if it renders the same output for the same state and props. For class components like this, React provides the PureComponent base class. Class components that extend the React. PureComponent class are treated as pure components

We can get more idea by looking below example. you can put this file in /src/components folder and put in /src/App.js file.

1. ParentComponent

ParentComponent
import React, { Component } from 'react'; import ReactPureComponent from './ReactPureComponent'; import ReactRegularComponent from './ReactRegularComponent'; class ParentComponent extends Component { constructor(props) { super(props) this.state = { name:'React' } } componentDidMount(){ setInterval(() => { this.setState({name:'React'}) }, 2000) } render() { console.log('Parent Component is Called.') return( <div> <div> Parent Component {this.state.name}</> <ReactPureComponent name={this.state.name} /> <ReactRegularComponent name={this.state.name} /> {console.log('------after 2 sec-----')} </div> ); } } export default ParentComponent;

2. ReactPureComponent

ReactPureComponent
import React, { PureComponent } from 'react'; class ReactPureComponent extends PureComponent { render() { console.log('Pure Component is Called.') return( <div> Pure Component {this.props.name} </div> ); } } export default ReactPureComponent;

3. ReactRegularComponent

ReactRegularComponent
import React, { Component } from 'react'; class ReactRegularComponent extends Component { render() { console.log('Regular Component is Called.') return( <div> Regular Component {this.props.name} </div> ); } } export default ReactRegularComponent;

By running the above example it will show output in the browser as per below,

Output
Parent Component React
Pure Component React
Regular Component React

But in console, it will show as per below,

Output
Parent Component is called.
Pure Component is called.
Regular Component is called.
------after 2 sec-----
Parent Component is called.
Regular Component is called.
------after 2 sec-----
Parent Component is called.
Regular Component is called.
------after 2 sec-----

Here, you can see that, Pure component is called only once at initially, then after every 2 second out componentDidMount's interval function set same name in state. due to this, PureComponent component is re-render. So, our child component is re-render. but Pure child component is not re-render second time.

Memo

Where Pure is for class-based component and a memo is for function-based component. below is the code of memo.

ReactPureComponent - Memo component

ReactPureComponent - Memo component
import React from 'react'; function MemoComponent ({name}) { console.log('Memo Component is Called.') return( <div> Pure Component {name} </div> ); } export default React.memo(MemoComponent);

Summary of use of pure component

  • We can create a component by extending the PureComponent class.
  • A PureComponent implements the shouldComponentUpdate lifecycle method by performing a shallow comparison on the props and state of component.
  • If there is no difference, the component is not re-rendered - performance boost.
  • It is a good idea to ensure that all the children components are also pure to avoid unexpected behavior.

 

← Previous

Next →