Pure Component Pattern

Introduction
In React, a pure component is a type of component that implements the shouldComponentUpdate lifecycle method with a shallow comparison of the current props and state with the next props and state. If the props and state haven't changed, the component doesn't re-render, which can lead to performance improvements.
i) Key Features of Pure Components
Shallow Comparison
Pure components use shallow comparison (i.e., === for primitive values and shallow comparison for objects) to determine whether the component needs to re-render. If neither the props nor the state have changed, the component skips the re-render.
Performance Optimization
By avoiding unnecessary re-renders, pure components can improve the performance of your React application, especially when dealing with complex UIs and large datasets.
Stateless and Stateful
Both stateless and stateful components can be pure components. The term "pure" refers to the optimization technique rather than the component's state.
ii) How to Create a Pure Component

 import React from 'react';

 class MyComponent extends React.PureComponent {
   render() {
     // Render your component
   }
 }

When you extend React.PureComponent instead of React.Component, your component automatically implements shouldComponentUpdate with a shallow prop and state comparison.
By using pure components, you can optimize your React application by preventing unnecessary re-renders, which can improve performance and efficiency.