useMemo vs useCallback Explained

These two hooks confuse everyone. Let's clear it up.

The One-Line Difference

useMemo → memoizes a value
useCallback → memoizes a function

That's it. Really.

useMemo: Cache Expensive Calculations

javascript

123

const expensiveValue = useMemo(() => {
  return heavyCalculation(data);
}, [data]);

Only recalculates when data changes.

useCallback: Cache Function References

javascript

123

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

Returns the same function reference unless count changes.

When to Use useMemo

javascript

12345678910

// ✅ Expensive computation
const sorted = useMemo(() => {
  return [...items].sort((a, b) => a.price - b.price);
}, [items]);

// ✅ Creating objects for dependencies
const options = useMemo(() => ({
  page: currentPage,
  limit: 10,
}), [currentPage]);

When to Use useCallback

javascript

1234567891011121314151617

// ✅ Passing callbacks to memoized children
const Parent = () => {
  const handleClick = useCallback(() => {
    doSomething();
  }, []);

  return <MemoizedChild onClick={handleClick} />;
};

// ✅ Dependencies of useEffect
const fetchData = useCallback(() => {
  api.get(`/users/${userId}`);
}, [userId]);

useEffect(() => {
  fetchData();
}, [fetchData]);

When NOT to Use Them

javascript

123456789

// ❌ Simple calculations
const doubled = useMemo(() => count * 2, [count]);
// Just do: const doubled = count * 2;

// ❌ Functions not passed as props
const handleClick = useCallback(() => {
  setOpen(true);
}, []);
// Just do: const handleClick = () => setOpen(true);

The Real Rule

Don't use them by default.

Only add them when:

You have a measurable performance problem
Passing callbacks to React.memo wrapped components
The value/function is a dependency of another hook

Quick Reference

Scenario	Hook
Expensive calculation	`useMemo`
Object for useEffect dep	`useMemo`
Callback to memo'd child	`useCallback`
Function for useEffect dep	`useCallback`
Simple math	Neither
Inline handlers	Neither

Performance optimization is great. Premature optimization wastes time.

useMemo vs useCallback Explained

The One-Line Difference

useMemo: Cache Expensive Calculations

useCallback: Cache Function References

When to Use useMemo

When to Use useCallback

When NOT to Use Them

The Real Rule

Quick Reference

Stay Updated 📬