React.memo - Preventing Unnecessary Re-renders

The default behavior is: whenever a parent component re-renders, all of its children re-render too — whether their props changed or not. In small apps this isn't an issue, but for heavy components (large lists, charts) it can become a real performance problem.

How React.memo Works

const ProductCard = React.memo(function ProductCard({ name, price }) {
  console.log('Rendering:', name);
  return (
    <div className="card">
      <h3>{name}</h3>
      <p>₹{price}</p>
    </div>
  );
});

React.memo wraps a component and does a shallow comparison of its props — if every prop is the same as the last render, React skips re-rendering that component entirely and reuses the previous result.

Important: Function/Object Props

// This function is a NEW object every time the parent re-renders:
<ProductCard onClick={() => addToCart(id)} />

// React.memo will treat this as a "different prop" and the memo becomes useless!

To fix this, the function in the parent needs to be stabilized with useCallback — React.memo and useCallback are often used together.

When to Use It

• ✅ The component is "heavy" (complex render logic, or an item in a large list).
• ✅ The parent re-renders often but the child's props rarely change.
• ❌ For small, simple components — the comparison overhead can outweigh the benefit.

Key Takeaways

• React.memo skips a component's re-render when its props are unchanged.
• It's only effective when props stay stable — function/object props need useCallback/useMemo.
• Use it selectively — wrapping everything isn't best practice.