What are Pure Components in React
ReactJS has provided us with a Pure Component. If we extend a class with Pure Component, there is no need for the shouldComponentUpdate() lifecycle method. ReactJS Pure Component Class compares the current state and props with new props and states to decide whether the React component should re-render itself or not.
In simple words, If the previous value of the state or props and the new value of the state or props are the same, the component will not re-render itself. Pure Components restricts the re-rendering when there is no use for re-rendering of the component. Pure Components are Class Components that extend React.PureComponent.
Example
This example demonstrates the creation of Pure Components.
import React from "react";
export default class Test extends React.PureComponent {
render() {
return <h1>Welcome to w3wiki</h1>;
}
}
Output :
ReactJS Pure Components
Generally, In ReactJS, we use the shouldComponentUpdate() Lifecycle method to customize the default behavior and implement it when the React component should re-render or update itself.
When working with React pure components, we can utilize their behavior to optimize behavior as pure components automatically handle the shouldComponentUpdate() method and we don’t need to explicitly implement it.
In this article, we will learn what is Pure component in React, and its key points with examples.