useMemo Hook

Cache the result of an expensive computation between renders.

Recipe

Quick-reference recipe card - copy-paste ready.

const memoizedValue = useMemo(() => computeExpensive(a, b), [a, b]);
 
// Memoize a derived array/object to stabilize references
const filtered = useMemo(
  () => items.filter((item) => item.active),
  [items]
);

When to reach for this: You have an expensive calculation that should not re-run on every render, or you need a stable object/array reference for a dependency array or child prop.

Working Example

"use client";
 
import { useMemo, useState } from "react";
 
function fibonacci(n: number): number {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}
 
export function FibonacciCalculator() {
  const [num, setNum] = useState(10);
  const [theme, setTheme] = useState<"light" | "dark">("light");
 
  const result = useMemo(() => fibonacci(num), [num]);
 
  return (
    <div className={theme === "dark" ? "bg-gray-900 text-white p-4" : "bg-white text-black p-4"}>
      <label className="flex items-center gap-2">
        n =
        <input
          type="number"
          value={num}
          onChange={(e) => setNum(Number(e.target.value))}
          className="w-20 border rounded px-2 py-1"
          max={40}
        />
      </label>
      <p className="mt-2 font-mono">fibonacci({num}) = {result}</p>
      <button
        onClick={() => setTheme((t) => (t === "light" ? "dark" : "light"))}
        className="mt-2 px-3 py-1 border rounded text-sm"
      >
        Toggle theme
      </button>
    </div>
  );
}

What this demonstrates:

• Expensive fibonacci calculation is memoized and only recalculates when num changes
• Toggling the theme does not recompute the fibonacci result
• Without useMemo, every re-render (including theme toggle) would re-run the expensive calculation

Deep Dive

How It Works

• On the first render, React calls your factory function and stores the result
• On subsequent renders, React compares each dependency with its previous value using Object.is
• If all dependencies are the same, React returns the cached result without calling the factory
• If any dependency changed, React calls the factory again and caches the new result
• useMemo is a performance optimization, not a semantic guarantee - React may discard the cache in some cases (e.g., offscreen components)

Parameters & Return Values

Variations

Stabilize an object for a dependency array:

const options = useMemo(
  () => ({ page, pageSize, sortBy }),
  [page, pageSize, sortBy]
);
 
useEffect(() => {
  fetchData(options);
}, [options]);

Memoize a filtered/sorted list:

const sortedUsers = useMemo(
  () => [...users].sort((a, b) => a.name.localeCompare(b.name)),
  [users]
);

Memoize a component tree (rare):

const chart = useMemo(
  () => <ExpensiveChart data={data} />,
  [data]
);

TypeScript Notes

// Return type is inferred from the factory
const total = useMemo(() => items.reduce((sum, i) => sum + i.price, 0), [items]);
// total: number
 
// Explicit generic when inference is too wide
const config = useMemo<Config>(() => ({ retries: 3, timeout: 5000 }), []);

Gotchas

• Premature optimization - Wrapping every value in useMemo adds complexity without measurable benefit for cheap computations. Fix: Profile first. Only memoize when you can measure a performance problem.

• Missing dependencies - Omitting a dependency causes the memoized value to be stale. Fix: Include all reactive values used inside the factory.

• Unstable dependency references - If a dependency is a new object/array on every render, useMemo recalculates every time anyway. Fix: Memoize the dependency itself, or restructure to depend on primitives.

• Side effects in the factory - useMemo runs during rendering; side effects (fetching, subscriptions) break React's rules. Fix: Move side effects to useEffect or event handlers.

• Not a guarantee - React may drop memoized values for offscreen components and recalculate later. Fix: Never rely on useMemo for correctness - only for performance.

Alternatives

When is it worth it? As a rule of thumb, memoize when the computation takes more than ~1ms or when the result is used as a dependency for useEffect, useCallback, or passed to a React.memo child.

FAQs

const options = useMemo(
  () => ({ page, pageSize, sortBy }),
  [page, pageSize, sortBy]
);
 
useEffect(() => {
  fetchData(options);
}, [options]); // stable reference, effect only re-runs when values change

interface Config {
  retries: number;
  timeout: number;
}
 
const config = useMemo<Config>(
  () => ({ retries: 3, timeout: 5000 }),
  []
);
// config: Config

const chart = useMemo(
  () => <ExpensiveChart data={data} />,
  [data]
);

Related

• useCallback - useMemo for functions
• useEffect - stabilize dependencies with useMemo to avoid re-running effects
• useDeferredValue - defer rendering of expensive content
• useRef - store values without triggering re-renders