Why useMemo Confused Me More Than It Helped at First

At some point, useMemo starts to feel like something you should use.

You see it in examples.

You hear that it improves performance.

You notice people wrapping objects and calculations with it.

So you start using it too.

And then things get… confusing.

The Expectation I Had

At first, I thought useMemo was simple:

“It caches a value so it doesn’t recompute”

That sounds straightforward.

So I assumed:

• if dependencies don’t change → value stays the same
• if dependencies change → recompute

Clean. Predictable.

What I Actually Experienced

But then I saw things that didn’t match that expectation.

• the function inside useMemo ran more than once
• values recomputed when I didn’t expect it
• sometimes it felt like useMemo wasn’t doing anything

And the confusion kicked in:

“Isn’t this supposed to cache?”

The Part That Was Misleading

The problem wasn’t useMemo.

It was how I was thinking about it.

I treated it like a guaranteed cache.

But React doesn’t treat it that way.

What useMemo Actually Depends On

There are two conditions for useMemo to reuse a value:

• the component is the same instance
• the dependencies don’t change

If either of these breaks:

the value is recomputed

The Missing Piece: Component Identity

This is where things started to click.

React doesn’t just track values.

It tracks identity.

If a component is recreated:

• all state resets
• all memo resets
• everything runs again

This can happen when:

• the component unmounts
• the key changes

So even if dependencies are the same:

no previous memo exists to reuse

The Other Source of Confusion

Even when the component stays the same, I still saw recomputation.

That’s when I learned:

React can re-run render more than once

Especially in development (Strict Mode).

So what I thought was “not cached” was actually:

React re-running the render, not breaking the cache

What useMemo Is Really Doing

At some point, the idea shifted.

It’s not:

“store this value forever”

It’s closer to:

“reuse this value between renders if nothing relevant changed”

That’s a much weaker promise.

But also a more accurate one.

Why It Feels Unreliable

Because it’s not meant to be a storage system.

It’s tied to:

• the current component instance
• the current render lifecycle

If React decides to:

• recreate the component
• discard a render
• re-run things for safety

Then your memo goes with it.

The Mental Shift That Helped

Instead of asking:

“Why isn’t this cached?”

I started asking:

“Does React still have the previous version to reuse?”

If yes → it reuses

If no → it recomputes

The Connection That Made It Click

It reminded me of how key works.

• same key → same component → state and memo preserved
• different key → new component → everything resets

That’s when it became clearer:

useMemo is about value identity

Same idea, different level.

Final Takeaway

useMemo isn’t broken.

It’s just not what I thought it was.

It doesn’t guarantee caching.

It doesn’t prevent re-renders.

It doesn’t store values forever.

It simply gives React a chance to reuse a value—

if the component still exists,

and if nothing relevant has changed.

And once that clicked, the confusion started to fade.