What is the difference between React.Component and React.PureComponent?
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.