What is the purpose of the useMemo hook?

React Beginner Questions - Set 3

It caches a computed value until its dependencies change, instead of recomputing on every render.

Example

import { useMemo, useState } from 'react';

export default function Search({ products }) {
  const [term, setTerm] = useState('');

  const matches = useMemo(() => {
    console.log('filtering', products.length);
    return products.filter(p =>
      p.name.toLowerCase().includes(term.toLowerCase())
    );
  }, [products, term]);

  return (
    <>
      <input value={term} onChange={e => setTerm(e.target.value)} />
      <p>{matches.length} results</p>
    </>
  );
}

What to notice

Compute the value, not the component: `useMemo(fn, deps)` returns whatever `fn` returned.
Dependencies must include everything the function reads, or you will serve stale results.
For cheap calculations the hook costs more than the work it saves — measure first.

← Back to the question list