Difference between React.Component and React.PureComponent? - GeeksforGeeks

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:
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.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.
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.
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.
Picked
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
ReactJS useNavigate() Hook
How to set background images in ReactJS ?
Axios in React: A Guide for Beginners
How to create a table in ReactJS ?
How to navigate on path by button click in react router ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
Difference between var, let and const keywords in JavaScript