Skip to content
Related Articles

Related Articles

Difference between React.Component and React.PureComponent?
  • Last Updated : 27 Jan, 2021

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.

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes arrow_drop_up
Recommended Articles
Page :