Why useMemo Confused Me More Than It Helped at First
useMemo can feel unreliable at first because itâs often mistaken for a guaranteed cache. In reality, it only reuses values when the component instance stays the same and dependencies donât change. Once you understand that itâs tied to Reactâs render lifecycleânot permanent storageâthe behavior starts to make sense.
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
useMemoran more than once - values recomputed when I didnât expect it
- sometimes it felt like
useMemowasnâ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
keychanges
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 identitySame 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.