The Real Cost of overusing useMemo and useCallback in React

Huseyn Ashurlu

6 min read

·

Oct 8, 2026

--

Listen

Share

Why more memoization doesn’t automatically mean better performance — and what a large React migration reminded me about optimization.

Press enter or click to view image in full size

Performance optimization sounds like something we should always want.

If we can avoid recalculating a value, why not cache it?

If we can prevent a function from being recreated, why not wrap it in useCallback?

If we can reduce re-renders, why wouldn’t we?

That thinking is exactly how many React codebases slowly become filled with useMemo, useCallback, and React.memo — often without anyone being able to explain what problem they are actually solving.

Recently, while working through a fairly large React migration, I spent a lot of time reviewing existing component code.

One pattern kept appearing:

const value = useMemo(() => {
  return items.length;
}, [items]);

const handleClick = useCallback(() => {
  setOpen(true);
}, []);

Technically, there is nothing wrong with this code.

But there is another question worth asking:

What are we actually optimizing here?