useMemo

useMemo caches the result of a calculation between renders.

1
2
3

const visibleItems = useMemo(() => {
  return items.filter((item) => item.visible);
}, [items]);

React reuses the previous result while the dependencies are unchanged.

When useMemo Helps

Use useMemo when:

• a calculation is noticeably expensive
• a stable object or array reference prevents unnecessary child renders
• a derived value is passed to another hook that depends on identity

1
2
3

const sortedProducts = useMemo(() => {
  return [...products].sort((a, b) => a.price - b.price);
}, [products]);

The copy matters. Sorting the original array would mutate props or state.

When Not to Use It

Do not memoize every calculation.

1

const fullName = `${firstName} ${lastName}`;

This is cheap and clear without useMemo.

Memoization has overhead and makes dependency correctness more important. Add it when it solves a real problem.

Object Identity

Objects and arrays created during render are new on every render.

1

const options = { pageSize: 20 };

If options is passed to a memoized child, that child may re-render every time. useMemo can stabilize it.

1

const options = useMemo(() => ({ pageSize: 20 }), []);

Dependency Pitfalls

The memoized calculation should list every reactive value it reads.

1
2
3

const filtered = useMemo(() => {
  return items.filter((item) => item.category === selectedCategory);
}, [items, selectedCategory]);

Missing selectedCategory would return stale results.

Common Mistakes

Do not use useMemo for side effects. It runs during rendering and should stay pure.

Do not mutate data inside useMemo.

1
2

// Wrong: mutates products.
const sorted = useMemo(() => products.sort(compare), [products]);

Do not expect useMemo to be a semantic guarantee forever. It is a performance hint. Code should still be correct if React recalculates.

Practice Challenge

Create a product list with search and sorting.

Requirements:

• use useMemo for filtering and sorting
• avoid mutating the original products array
• include all dependencies
• remove useMemo and compare readability for a tiny list

Recap

useMemo caches calculated values. Use it for expensive work or stable references, keep calculations pure, include dependencies, and avoid adding it where simple render logic is enough.