Pure Component in React Js
React.js is a popular JavaScript library used for building dynamic user interfaces. One of the key concepts in React is the "component." A component is a self-contained unit of code that defines a part of a user interface. It can be thought of as a building block for creating complex UIs.
In React, there are two types of components: functional and class components. Functional components are simpler and easier to write, while class components provide more features and flexibility. Regardless of which type of component you use, there is another important concept in React that you should know about: the pure component.
A pure component is a type of component that is optimized for performance. It is designed to only re-render when its props or state change. This means that if a pure component receives the same props and state as before, it will not re-render. This is useful because it can reduce the number of re-renders that occur in your application, which can improve performance.
To create a pure component in React, you can use the PureComponent class. This class is similar to the regular Component class, but it provides a performance optimization by automatically implementing shouldComponentUpdate() for you. This method checks if the component's props or state have changed, and only re-renders the component if they have.
Here is an example of a simple pure component:
import React, { PureComponent } from 'react';
class MyPureComponent extends PureComponent {
render() {
return (
<div>
<h1>{this.props.title}</h1>
<p>{this.props.text}</p>
</div>
);
}
}
In this example, the MyPureComponent class extends the PureComponent class. The render() method returns some simple JSX that displays the component's props. Because this is a pure component, it will only re-render if its props change.
To use this component in your application, you can simply import it and pass in the props:
import React from 'react';
import MyPureComponent from './MyPureComponent';
function App() {
return (
<div>
<MyPureComponent title="Hello" text="This is a pure component" />
</div>
);
}
In this example, the App component renders the MyPureComponent component with some props. Because MyPureComponent is a pure component, it will only re-render if its props change.
In summary, pure components are a performance optimization in React that can help reduce the number of re-renders in your application. They are designed to only re-render when their props or state change, which can improve performance. To create a pure component in React, you can use the PureComponent class, which automatically implements shouldComponentUpdate() for you.
Happy Learning!! Happy Coding!!
Comments