Memoization Using the useMemo Hook

Which work should a component repeat on every render, and which work could it keep from the last render? Most of what a component computes is cheap, and repeating it is the simplest correct choice. A few calculations are slow enough that repeating them with unchanged inputs wastes time the user can notice. The useMemo hook saves the result of one such calculation between renders and recomputes it only when its inputs change.

The Running Example: A Product Search

The store page now has a search box over a catalog of 20,000 products and a "Dark mode" checkbox. Every keystroke and every click of the checkbox re-renders ProductSearch.

import { useState } from 'react';

const CATEGORIES = ['Keyboards', 'Mice', 'Monitors', 'Cables', 'Headsets'];
const products = Array.from({ length: 20000 }, (_, i) => ({
  id: i,
  name: `${CATEGORIES[i % CATEGORIES.length]} item ${i}`,
  price: (i % 97) + 3,
}));

function filterProducts(products, query) {
  const q = query.trim().toLowerCase();
  return products
    .filter((p) => p.name.toLowerCase().includes(q))
    .sort((a, b) => a.price - b.price);
}

function ProductList({ items }) {
  return (
    <ul>
      {items.slice(0, 20).map((p) => (
        <li key={p.id}>{p.name} ${p.price}</li>
      ))}
    </ul>
  );
}

export default function ProductSearch() {
  const [query, setQuery] = useState('');
  const [isDark, setIsDark] = useState(false);

  const visible = filterProducts(products, query);

  return (
    <div className={isDark ? 'dark' : 'light'}>
      <input aria-label="search" value={query} onChange={(e) => setQuery(e.target.value)} />
      <label>
        <input type="checkbox" checked={isDark} onChange={(e) => setIsDark(e.target.checked)} />
        Dark mode
      </label>
      <p>{visible.length} products</p>
      <ProductList items={visible} />
    </div>
  );
}

filterProducts makes a lowercase copy of 20,000 names, keeps the matches and sorts them by price. We timed it in Node.js, taking the median of 20 calls:

filterProducts(20000, "mice") median ms: 2.43 result length: 4000

Repeated runs gave medians between 2.3 and 3.2 milliseconds. That is noticeable work for one render, and a browser on a slower device can take longer. React's documentation suggests that a calculation taking about 1 millisecond or more is a candidate for memoization. Before you memoize anything, measure the calculation in your own app, for example with console.time and console.timeEnd around the call.

Counting the Wasted Work

We rendered ProductSearch, entered "mice" in the search box as a single change, as pasting it would, and then clicked the "Dark mode" checkbox three times. A counter inside filterProducts recorded each call:

no useMemo | mount + type "mice": filterRuns 2 | after 3 dark-mode toggles: filterRuns 5

The first two calls are needed: one on mount and one for the new query. Typing the word letter by letter would need one call per letter instead, because each letter changes the query. The last three are not. Toggling dark mode changes isDark, which re-renders ProductSearch, and the component filters all 20,000 products again to get exactly the same 4,000 results.

Adding useMemo

useMemo takes two arguments: a function that computes the value, and a list of the values that the computation reads, called its dependencies. Replace the line that computes visible:

import { useMemo, useState } from 'react';

// inside ProductSearch
const visible = useMemo(() => filterProducts(products, query), [query]);

On the first render, React calls the function and stores both the result and the dependency list. On every later render, it compares each dependency with its previous value using Object.is. If all of them are equal, React returns the stored result without calling the function. If any of them changed, it calls the function again and stores the new result.

products is not in the list because it is defined outside the component and never changes. Only values from inside the component, such as props, state and variables computed from them, need to be listed.

The same steps now give:

useMemo | mount + type "mice": filterRuns 2 | after 3 dark-mode toggles: filterRuns 2