useMemo

🔍 What Is It?

useMemo(fn, deps) memoises the return value of fn. React calls fn on the first render, stores the result, and returns the stored result on subsequent renders — unless a dependency in deps has changed.

const sortedItems = useMemo(
  () => [...items].sort((a, b) => a.name.localeCompare(b.name)),
  [items] // recomputes only when items changes
);

useMemo is a performance optimisation. It adds overhead (the comparison + cache). If the computation is cheap (a few array operations on small data), useMemo makes things slower, not faster.

🎯 Why Do We Need It?

Every time a component re-renders, all the code in the function body runs again. For most code, this is fine — it is fast. But for genuinely expensive operations:

• →Filtering 10,000 records by multiple criteria
• →Sorting a large dataset
• →Transforming complex nested data structures
• →Calculating derived analytics from raw data

...running these on every render wastes CPU. useMemo ensures they only run when their inputs change.

🏗️ What Happens in Real Projects?

In a financial reporting dashboard:

• →Memoising a filtered + sorted list of 5,000 transactions based on date range and status filters
• →Computing running totals and aggregates from raw transaction data
• →Transforming API response data into chart-ready format
• →Deriving permission sets from a user's role object

In a code editor:

• →Parsing and syntax-highlighting large code blocks
• →Computing diff between two large strings

⚙️ How It Works

Comparison:

React uses Object.is() to compare each dependency. If all dependencies are the same as the previous render, the cached value is returned. If any dependency changed, the function runs again and the new result is cached.

Memory:

useMemo stores the last computed value. It does not cache multiple values — only the most recent.

React 19 Compiler:

The React Compiler (React 19+) automatically applies memoisation where it is safe. In the future, manual useMemo may become less necessary. But for React 18 and below, manual memoisation is still required.

💻 Example

useMemo in Real Applications — Expensive filtering, data transformation, and reference stability.

interface Transaction {
  id: string;
  amount: number;
  status: 'completed' | 'pending' | 'failed';
  date: string;
  merchant: string;
}

function TransactionList({ transactions }: { transactions: Transaction[] }) {
  const [search, setSearch] = useState('');
  const [statusFilter, setStatusFilter] = useState<string>('all');
  const [sortBy, setSortBy] = useState<'date' | 'amount'>('date');

  // Without useMemo: runs on every render, including unrelated state changes
  // With useMemo: only runs when transactions, search, statusFilter, or sortBy changes
  const filtered = useMemo(() => {
    let result = transactions;

    if (statusFilter !== 'all') {
      result = result.filter(t => t.status === statusFilter);
    }

    if (search) {
      const q = search.toLowerCase();
      result = result.filter(t =>
        t.merchant.toLowerCase().includes(q) ||
        t.id.includes(q)
      );
    }

    return [...result].sort((a, b) =>
      sortBy === 'date'
        ? new Date(b.date).getTime() - new Date(a.date).getTime()
        : b.amount - a.amount
    );
  }, [transactions, search, statusFilter, sortBy]);

  return <>{filtered.map(t => <TransactionRow key={t.id} transaction={t} />)}</>;
}

🤔 Common Confusions

🚨 Common Production Issues

✅ Best Practices

🏛️ Architect's Note

💬 Frequently Asked Questions

🎯 Key Takeaways

🔗 Related Topics

🎯 Practice this topic in interviews

↗ Where this topic fits