What is a React pure component?

• Pure Components in React are the components which do not re-renders when the value of state and props has been updated with the same values.
• If the value of the previous state or props and the new state or props is the same, the component is not re-rendered. Pure Components restricts the rerendering ensuring the higher performance of the Component
• Pure Components restricts Re-Rendering
• Similar to Pure Functions in JavaScript, a React component is considered a Pure Component if it renders the same output for the same state and props value.
• React provides the PureComponent base class for these class components. Class components that extend the React.PureComponent class are treated as pure components

When to use it?

• We know that in React we can create a component in two different ways i.e
• one is Class component/ Stateful component and another is Functional component/Stateless component.
• A React component can be considered pure if it renders the same output for the same state and props.
• We can convert component to pure component as below:
• For class components react provides React.PureComponent base class.
• For Functional component react provides React.memo HOC (Higher Order Component).

Features of React Pure Components?

• Prevents re-rendering of Component if props or state is the same
• Takes care of “shouldComponentUpdate” implicitly
• State and Props are Shallow Compared
• Pure Components are more performant in certain cases