When to Use React.memo, useMemo, useCallback

🧠 When to Use React.memo, useMemo, and useCallback in React 19

React 19 introduces powerful automatic memoization features — but there are still times when manual memoization tools like React.memo, useMemo, and useCallback are essential for optimizing performance. In this post, you’ll learn exactly when to use (and avoid) them. ⚛️⚡

📌 Quick Definitions

• React.memo 🧱 – Prevents functional components from re-rendering unless props change
• useMemo 💡 – Memoizes the return value of a function (e.g., computed values)
• useCallback 🔁 – Memoizes a callback function, useful when passing functions to children

✅ When to Use React.memo

Use React.memo to wrap functional components that:

• 🧩 Render large or complex UIs
• 🔁 Receive the same props frequently
• ⚠️ Are passed into other components as children

const ProductCard = React.memo(function ProductCard({ product }) {
  return <div>{product.name}</div>;
});

💡 Avoid using React.memo for tiny components or when prop changes are unavoidable — it could cost more than it saves!

✅ When to Use useMemo

Use useMemo when you have expensive calculations inside your component that don’t need to run on every render.

const filteredData = useMemo(() => {
  return data.filter(item => item.active);
}, [data]);

Best for:

• 📊 Expensive data filtering or mapping
• 🔄 Derived state computations
• 📉 Avoiding recalculation in frequently re-rendered components

⚠️ Don’t wrap everything in useMemo — it adds complexity and minor overhead if used unnecessarily.

✅ When to Use useCallback

Use useCallback when you’re passing a function down as a prop to a memoized child component — and you want to avoid unnecessary renders.

const handleClick = useCallback(() => {
  console.log('Clicked!');
}, []);

Perfect for:

• 🧠 Passing stable functions to React.memo-wrapped children
• 🎯 Avoiding recreation of handlers on every render

⚠️ useCallback has no performance benefit unless the function is passed as a prop — don’t use it just to "optimize."

🚫 When NOT to Use Them

Thanks to React 19’s automatic optimizations, you can often avoid these tools when:

• ✅ Components are Server Components (already auto-memoized)
• ✅ Props are primitives or rarely change
• ✅ Functions aren’t passed as props
• ✅ You’re optimizing prematurely (before measuring a problem)

🧪 Real Example: When They Matter

const List = React.memo(function List({ items, onSelect }) {
  return items.map(item => (
    <div key={item.id} onClick={() => onSelect(item)}>
      {item.name}
    </div>
  ));
});

const App = () => {
  const [data, setData] = useState(products);

  const handleSelect = useCallback((item) => {
    console.log('Selected:', item);
  }, []);

  return <List items={data} onSelect={handleSelect} />;
};

In this case:

• ✅ List is wrapped in React.memo to avoid re-rendering when data doesn’t change
• ✅ handleSelect is memoized with useCallback so it’s not re-created on each render

📋 Summary

• 🧱 Use React.memo for heavy/pure components with stable props
• 💡 Use useMemo for expensive value computations
• 🔁 Use useCallback when passing stable functions to children
• ✅ Let React 19 handle memoization by default where possible

🚀 Final Thoughts

React 19 takes care of a lot under the hood — but knowing when to manually optimize still matters. Used wisely, React.memo, useMemo, and useCallback can give your app a meaningful performance boost without overcomplicating your code. Optimize intentionally, not reflexively! 💡⚛️