React useMemo

Overview

useMemo caches a computed value between renders. It's an optimization — code should work correctly without it. The common denominator for all valid cases: cost of computation or reference stability.

When to Use

1. Expensive computations

// ❌ Filtering 10,000 products on every render
const filtered = products.filter(p =>
  p.name.toLowerCase().includes(query.toLowerCase())
);

// ✅ Recalculates only when products or query change
const filtered = useMemo(() =>
  products.filter(p =>
    p.name.toLowerCase().includes(query.toLowerCase())