Q344- Difference between React.memo and PureComponent?

Both are used to prevent unnecessary re-renders by doing a shallow comparison of props, but they are meant for different component types.

---

🔹 React.PureComponent

• Used with class components
• Automatically implements shouldComponentUpdate
• Performs shallow comparison of props and state

Example

class MyComponent extends React.PureComponent {
  render() {
    return <div>{this.props.count}</div>;
  }
}

Key points

✔ Class-based
✔ Compares props + state
❌ Cannot customize comparison easily

---

🔹 React.memo

• Used with functional components
• Prevents re-render if props don’t change
• Can accept a custom comparison function

Example

const MyComponent = React.memo(({ count }) => {
  return <div>{count}</div>;
});

With custom comparison

React.memo(Component, (prevProps, nextProps) => {
  return prevProps.count === nextProps.count;
});

Key points

✔ Function-based
✔ Compares props only
✔ Custom comparison supported

---

🔥 Key Differences

Feature	React.memo	PureComponent
Component type	Functional	Class
Comparison	Props only	Props + State
Custom compare	✅ Yes	❌ No
Introduced in	React 16.6	Earlier React
Hooks support	✅ Yes	❌ No

---

⚠️ Common Pitfall (Both)

• Shallow comparison fails for mutated objects

props.user.name = "New"; // ❌ mutation

Always use immutable updates.

---

🎯 Short Interview Answer

React.memo is used with functional components to memoize renders based on props, while PureComponent is used with class components and performs shallow comparison on both props and state. React.memo also allows custom comparison logic.

---

⭐ One-line summary

PureComponent is for classes; React.memo is for functions—with more flexibility.