React Pure Components, introduced for performance enhancement. We can use this optimization to improve the performance of your components. A react component can consider, Pure if it renders the same output for the same state and props. However, it is the same as components except that the pure components take care of shouldComponentUpdate by itself. A shouldComponentUpdate is a lifecycle method which by default returns a true Boolean value. The main motive of the shouldComponentUpdate is you can custom implement the default behavior and decide when react should update or re-render the component.
Generally, we use state or props value to decide the update cycle. React has now provided us a pure Component. That does the comparison of a state as well as props to decide the update cycle. We don’t need to override shouldComponentUpdate if we extend a class with a pure component. React does the shallow comparisons of the current state and props with new props and state to decide whether to continue with the new update cycle or not. This helps in improving the performance of the application.
For Example:
import React from 'react';
class Test extends React.PureComponent {
constructor(props){
super(props);
}
render(){
return(
<h1>This is an example of pure component</h1>
);
}
}
export default Test;Output
React provides the PureComponent base class for these class components. Class components that extend the React.PureComponent class treated as a pure component. Also, Pure Components restricts the re-rendering ensuring the higher performance of the Component.
Features of React Pure Component:
- Prevents Re-Rendering of Component if props or state is the same.
- Take care of “shouldComponentUpdate” implicitly.
- State and Props are shallow Compared.
- Pure Components are most performant in certain cases.
Recommended Posts:
Difference between the Java and JavaScript
Reference:
instagram/TheIndiaDev