A React component can be considered pure if it renders the same output for the same state and props. They are the components that do not re-render when the value of props and state has been updated with the same values thus they improve performance.
Pure components have some performance improvements and render optimizations since React implements the shouldComponentUpdate() method for them with a shallow comparison for props and state.
For class components like this, React provides the PureComponent base class. Class components that extend the React.PureComponent classes are treated as pure components.
Functional components cannot leverage the performance improvements and render optimizations that come with React.PureComponent since they are not classes by definition.
To create a pure functional component in React, React provides a React.memo() API. Using the React.memo() API, the React functional component can be wrapped as follows to get the React Pure Functional Component.
They prevent the re-rendering if props and state are the same by a Shallow comparison of state and props
They handle shouldComponentUpdate implicitly
Increases performance.