What are components?

The basic building blocks of React which can be anything from a simple HTML element to a SPA (single page application) can be termed as a component. The pros of using components in React is to achieve reusability of elements having similar behaviour or similar design. Components can be implememnted as:

What problem does React pure component solve?

Problem: React's render method re-renders a component even if we pass same props and state. So App's performance gets slightly decreased.

Illustration:

import {useState} from 'react'
export default function App() {
    const [count, setCount]=useState(0);
    const handleClick=()=>{
        setCount(0);
    }
    console.log("rendered");
  return(
      <>
          <h1>{count}</h1>
          <button onclick={handleClick}>Click</button>
      </>
  )
}

Here, if we see the console the component App will re-render everytime we click on the button. But, the state of count remains fixed yet the re-render happens.

Pure components: the solution

Pure components are those components that only gets rendered when there is a difference between current and previous states or props. For class-based components, React.PureComponent is used (same as React.Component).

Limitation: React.PureComponent shallowly compares objects. If your component consist of complex data structures as its state or prop then it might produce certain undesirable effects.
Here, shallow compare refers to the shallow equality (===) check on the current props or state objects by iterating over the keys of the objects and for each object it compares and returns true only if the values are strictly not equal. Shallow compare works by checking
1. if two values are equal in case of primitive types like numbers, string.
2. in case of objects, it simply checks the reference not the values inside.
Refer to this article for more: Click here

Conclusion

When to use pure components?
Only use pure component when you expect to have simple state or props.