What is the difference between React.Component and React.PureComponent?

Why Interviewers Ask This

Interviewers use this question to quickly assess whether a candidate has the foundational knowledge required for React.js development. It reveals whether you understand the building blocks that more complex concepts rely on.

Answer

React.Component re-renders whenever setState() is called or when its parent re-renders, regardless of whether the props or state actually changed. React.PureComponent implements shouldComponentUpdate() with a shallow comparison of current and next props and state — it only re-renders if something actually changed (by shallow reference). This prevents unnecessary re-renders when parent components re-render but pass the same props. Shallow comparison: primitives are compared by value; objects and arrays by reference. So if you pass a new object { count: 1 } every render (even with the same data), PureComponent still re-renders because it is a new reference. Function component equivalent: React.memo is the function-component equivalent of PureComponent. Caution: PureComponent can produce bugs if you mutate objects directly (the reference does not change, so PureComponent skips the render even though the data changed). Always treat props and state as immutable when using PureComponent. For complex objects, consider using Immer or structural sharing.

Pro Tip

Back up your answer with a specific project or situation. Saying 'In my last React.js project, I used this when...' immediately makes your answer more credible and memorable.