11 — useMemo, useCallback & React.memo

Performance hooks that let you skip unnecessary work. But they have costs — use them wisely.

The Three Tools

Tool	What It Memoizes	Use Case
useMemo(fn, deps)	A computed value	Expensive calculations
useCallback(fn, deps)	A function reference	Stable callbacks for memo'd children
React.memo(Component)	A component's render	Skip re-render when props haven't changed

When to Use (and When NOT to)

✅ Use Memoization When:

• Filtering/sorting large lists (1000+ items)
• Complex mathematical computations
• Passing callbacks to React.memo-wrapped children
• Context values (to prevent consumer re-renders)

❌ Don't Use When:

• Simple calculations (adding two numbers)
• The component rarely re-renders anyway
• You're not sure if it helps (measure first!)
• The value is a primitive (React already optimizes)

> Rule: Every useMemo and useCallback has overhead (dependency comparison). If the computation is cheap, memoization is slower.

File

• memoization.tsx — useMemo, useCallback, React.memo, performance measurement, when to use, anti-patterns