Generally, In ReactJS, we use shouldComponentUpdate() Lifecycle method to customize the default behavior and implement it when the React component should re-render or update itself.
Now, ReactJS has provided us a Pure Component. If we extend a class with Pure Component, there is no need for shouldComponentUpdate() Lifecycle Method. ReactJS Pure Component Class compares 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 state or props and the new value of state or props is the same, the component will not re-render itself. Since Pure Components restricts the re-rendering when there is no use of re-rendering of the component. Pure Components are Class Components which extends React.PureComponent.
Example: Program to demonstrate the creation of Pure Components.
Extending React Class Components with Pure Components ensures the higher performance of the Component and ultimately makes your application faster, While in the case of Regular Component, it will always re-render either value of State and Props changes or not.
While using Pure Components, Things to be noted are that, In these components, the Value of State and Props are Shallow Compared (Shallow Comparison) and It also takes care of “shouldComponentUpdate” Lifecycle method implicitly.
So there is a possibility that if these State and Props Objects contain nested data structure then Pure Component’s implemented shouldComponentUpdate will return false and will not update the whole subtree of Children of this Class Component. So in Pure Component, the nested data structure doesn’t work properly.
In this case, State and Props Objects should be simple objects and Child Elements should also be Pure, means to return the same output for the same input values at any instance.
- ReactJS | Components
- ReactJS | Components - Set 2
- ReactJS | Lifecycle of Components
- ReactJS | Functional Components
- ReactJS | Class Based Components
- How to map data into Components using ReactJS?
- ReactJS Components Complete Reference
- Differences between Functional Components and Class Components in React
- Deesign a close button using Pure CSS
- ReactJS | Introduction to JSX
- ReactJS | ReactDOM
- ReactJS | Rendering Elements
- ReactJS | State in React
- ReactJS | Props - Set 1
- ReactJS | Implementing State & Lifecycle
- ReactJS | Props - Set 2
- ReactJS | PropTypes
- ReactJS | Importing and Exporting
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.