What Is useMemo? When AI Optimizes Your React Code

Why AI Coders Need This

React components re-render a lot. Every time state changes, every time a parent re-renders, your component runs again — including every calculation inside it. For a simple counter, this is invisible. For a component that filters 5,000 products, sorts them, and computes statistics, re-running those calculations on every keystroke in a search box is noticeably slow.

useMemo is React's way of saying: "Hey, you already calculated this, and the inputs haven't changed. Use the cached answer."

AI tools like Cursor and Claude Code add useMemo fairly aggressively. Sometimes it's genuinely necessary. Sometimes it's the equivalent of putting a turbocharger on a bicycle. This guide teaches you to tell the difference.

The Problem: React Recalculates Everything on Every Render

Here's a product list component. Watch what happens on every render:

function ProductList({ products, searchTerm, sortBy }) {
  // This runs on EVERY render — even if products hasn't changed
  const filtered = products.filter(p =>
    p.name.toLowerCase().includes(searchTerm.toLowerCase())
  );

  // This ALSO runs on every render
  const sorted = [...filtered].sort((a, b) => {
    if (sortBy === 'price') return a.price - b.price;
    if (sortBy === 'name') return a.name.localeCompare(b.name);
    return 0;
  });

  // And THIS runs on every render too
  const stats = {
    total: sorted.length,
    avgPrice: sorted.reduce((sum, p) => sum + p.price, 0) / sorted.length,
    minPrice: Math.min(...sorted.map(p => p.price)),
    maxPrice: Math.max(...sorted.map(p => p.price)),
  };

  return (
    <div>
      <p>{stats.total} products, avg ${stats.avgPrice.toFixed(2)}</p>
      {sorted.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}

With 50 products, you'll never notice. With 5,000? Every time the user types a letter, React filters 5,000 items, sorts the results, and computes statistics. The user presses a key and waits 200ms for the UI to respond. That's sluggish.

The fix isn't to change what the code does — it's to avoid doing the work when the inputs haven't changed.

The useMemo Solution

function ProductList({ products, searchTerm, sortBy }) {
  // Only recalculates when products or searchTerm changes
  const filtered = useMemo(() =>
    products.filter(p =>
      p.name.toLowerCase().includes(searchTerm.toLowerCase())
    ),
    [products, searchTerm]  // ← dependency array
  );

  // Only recalculates when filtered or sortBy changes
  const sorted = useMemo(() =>
    [...filtered].sort((a, b) => {
      if (sortBy === 'price') return a.price - b.price;
      if (sortBy === 'name') return a.name.localeCompare(b.name);
      return 0;
    }),
    [filtered, sortBy]
  );

  // Only recalculates when sorted changes
  const stats = useMemo(() => ({
    total: sorted.length,
    avgPrice: sorted.reduce((sum, p) => sum + p.price, 0) / sorted.length,
    minPrice: Math.min(...sorted.map(p => p.price)),
    maxPrice: Math.max(...sorted.map(p => p.price)),
  }), [sorted]);

  return (
    <div>
      <p>{stats.total} products, avg ${stats.avgPrice.toFixed(2)}</p>
      {sorted.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}

Now when the user clicks a button that changes some unrelated state (like opening a sidebar), React re-renders this component but skips all three calculations because products, searchTerm, and sortBy haven't changed. It returns the cached results instantly.

How useMemo Works (The Mental Model)

Think of useMemo as a sticky note on your desk:

1. First render: React runs your calculation, writes the result on a sticky note, and saves it
2. Next render: React checks the dependency array. Did any of those values change?
3. If nothing changed: React reads the sticky note instead of recalculating. Instant.
4. If something changed: React throws away the old sticky note, runs the calculation again, and writes a new one.

The syntax is always the same:

const cachedValue = useMemo(
  () => expensiveCalculation(input1, input2),  // the calculation
  [input1, input2]                              // when to recalculate
);

The dependency array is the critical part. It tells React: "Only redo this calculation when these specific values change." Get it wrong and you either recalculate too often (wasting the optimization) or not enough (stale data bug).

useMemo vs useCallback: The Confusion AI Creates

AI constantly mixes these up. Here's the simple difference:

Hook	What It Caches	Returns	Use When
useMemo	A computed value	The result of a function	Expensive calculations, derived data
useCallback	A function definition	The function itself	Passing callbacks to child components

// useMemo — caches the RESULT
const sortedList = useMemo(() => items.sort(), [items]);

// useCallback — caches the FUNCTION
const handleClick = useCallback(() => {
  doSomething(id);
}, [id]);

If AI writes useMemo(() => () => doSomething(), [dep]) — a useMemo that returns a function — it should be useCallback(() => doSomething(), [dep]) instead. Tell it: "This should be useCallback, not useMemo returning a function."

When useMemo Is Worth It (and When It's Not)

The rule of thumb: If you can't feel the performance difference when you remove useMemo, you don't need it. The React team's official guidance is: "Write the code without useMemo first. Add it only when you have a measurable performance problem."

What AI Gets Wrong About useMemo

React 19 and the Future of useMemo

Here's the plot twist: React 19 includes a compiler that can automatically add memoization. The React team's long-term goal is to make useMemo and useCallback unnecessary — the compiler will figure out what needs caching.

Does that mean you shouldn't learn useMemo? No. The compiler is opt-in, not everything is compiled automatically, and understanding why memoization exists helps you debug performance issues regardless of whether you write it manually or the compiler adds it. Plus, AI will generate useMemo code for years — it's everywhere in training data.

Debugging useMemo with AI

AI is actually good at this — better at analyzing existing code for memoization opportunities than deciding during initial generation. Give it your slow component and ask specifically "what's expensive here?" rather than letting it guess.

Frequently Asked Questions