Open In App

Difference between React.Component and React.PureComponent?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

A Component is one of the core building blocks of React. In other words, we can say that every application you will develop in React will be made up of pieces called components. But React has two types of Components:

  1. React.PureComponent: It is one of the most significant ways to optimize React applications. By using the pure component, there is no need for shouldComponentUpdate() Lifecycle Method as ReactJS Pure Component Class compares current state and props with new props and states to decide whether the component should re-render or Not.
  2. React.Component: But on the other hand, React.Component re-renders itself every time the props passed to it changes, parent component re-renders or if the shouldComponentUpdate() method is called. It doesn’t optimize the React application. They are easy and fast to implement and also are good for very small UI views where a re-render wouldn’t matter that much. They provide cleaner code and fewer files to deal with.

When to use React.PureComponent?

You may choose React.PureComponent over React.Component if any of the below conditions is satisfied:

  • State/Props should be an immutable object
  • State/Props should not have a hierarchy
  • You should call forceUpdate() when data changes

Creating React Application:

Step 1: Create a React application using the following command:

npx create-react-app functiondemo

Step 2: After creating your project folder i.e. functiondemo, move to it using the following command:

cd functiondemo

Project Structure: It will look like the following.

Project Structure

Example: In this example, we are going to build a name color application that changes the color of the text when the component is rendered in the DOM tree.

App.js: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

Using React.Component:

Javascript




import React from 'react';
  
class Comp1 extends React.Component {
  render() {
    console.log('Child Component is called');
    return <h1>{this.props.value}</h1>;
  }
}
  
class App extends React.Component {
  state = { color: 'black' };
  render() {
    return (
      <div style={{ color: this.state.color }}>
        <Comp1 value="Rahul" />
        <button onClick={() => this.setState({ color: 'green' })}>
          Change Color
        </button>
      </div>
    );
  }
}
export default App;


Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Using React.PureComponent:

Javascript




import React from 'react';
  
class Comp1 extends React.PureComponent {
  render() {
    console.log('Child Component is called');
    return <h1>{this.props.value}</h1>;
  }
}
  
class App extends React.Component {
  state = { color: 'black' };
  render() {
    return (
      <div style={{ color: this.state.color }}>
        <Comp1 value="Rahul" />
        <button onClick={() => this.setState({ color: 'green' })}>
          Change Color
        </button>
      </div>
    );
  }
}
export default App;


Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Conclusion: 

If you use React.Component then the child component is also re-rendered if the parent component re-renders itself but in the React.PureComponent, the child component only re-renders if the props passed to it changes.



Last Updated : 27 Jan, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads