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.
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.
Primitives: If props.count changes from 5 to 5, it won't re-render. (Correct)
Objects/Arrays: If you pass a new array literal [1, 2, 3] every time the parent renders, the Pure Component will re-render because the memory reference is different, even if the numbers inside are the same.