useMemo

React chapter 12 · useMemo · theme, context value, ownerState · source: react.dev/reference/react/useMemo

The problem

The child is wrapped in memo, but the parent builds a fresh object or list on every render. A fresh object never equals the old one, so memo never skips anything.

The pattern that fixes it

useMemo remembers a value and hands back the very same object until its dependencies change. Now memo can do its job, and expensive filtering only runs when its inputs change.

In plain words

Every time a component runs, it rebuilds every object and list it creates, even if the contents are identical. Two objects that look the same are still different things in memory. useMemo says: "keep the one you already made, unless these inputs changed."

You print a fresh copy of the same menu every morning, so the waiter thinks it is a new menu each time. useMemo keeps yesterday's menu on the table until the dishes actually change.

Terms

reference (identity)
Which exact object in memory you are holding. {a:1} and another {a:1} look alike but are two different references.
dependencies
The list at the end, like [name]. If none of them changed since last render, React reuses the stored value.
derived data
A value you compute from state, such as a filtered list. You do not store it, you recalculate it.
stale value
An old result that no longer matches the current inputs, usually from a missing dependency.

Going deeper

How does it work?

On each render React compares the new dependency array with the previous one using Object.is, item by item. If all match, useMemo returns the value it stored last time and does not call your function. If one differs, it calls the function and stores the new result. The stored value lives with the component, so each component instance has its own cache.

When it does nothing, or goes wrong

It does nothing if the child is not wrapped in memo, because the child re-renders with its parent anyway. It also does nothing if a dependency is itself a new object each render. Leaving out a dependency (try the third option in the lab) gives you stale values, which is worse than being slow. React may also discard cached values in rare cases, so never rely on it for correctness, only for speed.

When NOT to use it, and modern alternatives

Do not wrap cheap work: reading the cache costs about as much as a small filter. Use it where a reference must stay stable (a memo child prop, a context value, an effect dependency) or where a calculation is genuinely slow. The React Compiler adds this kind of memoization automatically, and with it on you can delete most hand-written useMemo calls. Measure with the React DevTools Profiler first.

Keep learning

More courses

  • Jobs, linked to lessons — Browse jobs where every requirement links to the chapter that teaches it. See how ready you are, how long the gap takes to close, and which listings look stale.
  • Match a job post to courses — Paste a job post. Each skill is matched to a track here and put in learning order, foundations first.
  • Database in depth — How a query becomes work. Indexes, isolation, locks, and the plans that explain why a page is slow — not an ORM tour.
  • System Design — Eight interview case studies, from a flash sale and Tatkal to a live final and a chat model, plus JWT in separate chapters.
  • Microservices — Microservice patterns one diagram at a time: how to split a monolith, how services talk, and how data stays consistent without distributed transactions.
  • Kafka — A beginner-to-senior path through event logs, reliable delivery, production operations, and disaster recovery.
  • Frontend system design — How a UI is sliced when it is a product, not a page: ownership of state, cache, routes, and what happens when the network lies.
  • CSS in depth — See the box, then the page. Visual chapters from the box model through Flexbox surprises, Grid, selectors, and units, then backgrounds, shapes, and visual effects, each with a playground.
  • Accessibility — HTML labs first, then a full pass of WAI-ARIA 1.3: naming, every state, widget and structure roles, live regions, ariaNotify, and relationships.
  • Docker — What an image is, why layers cache, and how containers find each other on a network.
  • Redis — Fifteen Redis patterns, one picture each: cache, session, lock, counter, rate limiter, queue, and when Redis is the wrong tool.