React useMemo Deep Dive

In the last lesson, React React.memo, you saw that fresh objects break memo. This lesson goes deeper into useMemo and its second job: keeping a value’s reference stable so React.memo and effects don’t fire needlessly.

🤔 The two jobs of useMemo, revisited

useMemo really does two things, and the second one is the performance star.

• Skip expensive work: it caches a slow calculation so it only re-runs when its dependencies change. So this is about saving CPU time.
• Keep a reference stable: it returns the same object or array between renders, so things comparing by reference don’t see a change. So this one is about identity, and that’s what makes React.memo and effect dependencies behave.

🔗 What is reference equality?

This is the key idea, so let’s nail it down. In JavaScript, objects are compared by reference, not by their contents.

const a = { name: "Alex" };
const b = { name: "Alex" };

console.log(a === b);   // false! different objects, even with same contents
console.log(a === a);   // true, same object

Read what’s happening.

• a and b hold objects that look identical, but see, they’re two separate objects in memory.
• === on objects asks “are these the exact same object?”, not “do they contain the same thing?”.
• So a === b is false, even though their contents match.
• And here’s the connection to rendering: every time a component renders, any object written inside it is a brand new object. So it’s never === to the one from last render.

🧩 useMemo keeps the reference stable

useMemo solves the identity problem: it returns the same object across renders until a dependency changes.

import { useMemo } from "react";

function Parent({ userId }) {
  // ✅ same object identity unless userId changes
  const user = useMemo(() => ({ id: userId, role: "admin" }), [userId]);

  return <Child user={user} />;
}

Walk through what this buys you.

• Without useMemo, { id: userId, role: "admin" } would be a new object every render.
• With it, React returns the same object until userId changes.
• So if Child is wrapped in React.memo, it now sees the same user prop and skips re-rendering.
• Then when userId does change, useMemo makes a new object, and Child re-renders correctly.

💡 The full picture: memo + useMemo together

Let’s see the team in action: a memoized child plus a memoized object prop means the child truly skips needless renders.

import { useState, useMemo, memo } from "react";

const Child = memo(function Child({ config }) {
  console.log("Child rendered");
  return <p>Mode: {config.mode}</p>;
});

function Parent() {
  const [count, setCount] = useState(0);

  // stable object: same reference every render
  const config = useMemo(() => ({ mode: "dark" }), []);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Count: {count}</button>
      <Child config={config} />
    </div>
  );
}

Here’s why the child stays quiet.

• config is memoized with [], so it’s the same object on every render.
• Clicking the button re-renders Parent, but config keeps its identity.
• Child is wrapped in memo, sees the same config, and skips its render.
• Remove the useMemo and config would be new each render, so Child would re-render on every click.

Child rendered
(click) ... Child skipped
(click) ... Child skipped

⚖️ useMemo has a cost

Here’s the deep part people miss: useMemo is not free.

• React has to remember the dependencies and the saved value, and compare them each render.
• For cheap calculations, that bookkeeping can cost more than just redoing the work.
• So useMemo is a trade: you pay a little overhead to save a bigger cost.
• And if the cost you’re saving is tiny, useMemo is a net loss in both speed and readability.
• So only reach for it when the thing you’re saving is genuinely expensive, or when you need a stable reference for memo or an effect.

⚠️ Common Mistakes

A common mistake is using useMemo for a cheap value, expecting magic speed.

// ❌ trivial work - the memo overhead costs more than just computing it
const total = useMemo(() => price + tax, [price, tax]);

// ✅ just compute it directly
const total = price + tax;

Keep these in mind.

• Don’t memoize cheap calculations. Plain code is faster and clearer.
• Don’t forget dependencies, or you get a stale cached value.
• Don’t expect useMemo to help a memo child unless the memoized value is actually passed to it as a prop.

✅ Best Practices

A few habits for useMemo in performance work.

• Use it for genuinely expensive calculations, or to keep an object/array reference stable.
• Pair it with React.memo: memoize the object prop, and the memoized child can skip renders.
• Always list every dependency the calculation reads.
• Skip it for cheap values, and measure before adding it.

🧩 What You’ve Learned

• ✅ useMemo has two jobs: cache expensive work, and keep a value’s reference stable
• ✅ Objects are compared by reference (===), not contents, so a new object each render looks “changed”
• ✅ A fresh object prop defeats React.memo; useMemo keeps it stable so memo works
• ✅ Together, a memoized object prop and a memo child stop needless re-renders
• ✅ useMemo has real overhead, so it pays off only for heavy work or reference stability
• ✅ Always list dependencies, and skip useMemo for cheap values

🚀 What’s Next?

Now you understand reference stability for values. Functions have the exact same problem, a new function every render breaks memo too. Next you’ll go deeper into useCallback, the tool for keeping function props stable.

React useCallback Deep Dive