What does useMemo do, and when is it actually useful?

Direct answer

useMemo caches the result of a pure calculation between renders while its dependencies remain equal, and it should be treated as a performance optimization rather than part of application correctness.

ProductList.jsx

function ProductList({ products, query }) {
  const visibleProducts = useMemo(
    () => expensiveFilter(products, query),
    [products, query]
  );

  return <Results items={visibleProducts} />;
}

Expensive calculation: avoid recomputing work when its inputs rarely change.
Stable prop value: preserve an object/array identity passed to a memoized child when that stability actually matters.
Hook dependency: preserve a value whose identity is intentionally used by another Hook.