When useMemo Hurts Performance

Memoization isn't free. Learn the cost of useMemo and when you should avoid using it.

The Cost of Memoization

useMemo incurs two costs:

Memory: Storing the cached value and the dependency array.
Computation: Comparing the dependencies on every render.

Example: Premature Optimization

      
typescript

// ❌ SLOWER than standard JS
const value = useMemo(() => {
  return a + b;
}, [a, b]);

JavaScript engines (V8) are incredibly fast at math. React's overhead to check prevDependencies !== nextDependencies takes longer than just adding a + b.

When to Avoid It

Simple primitive transformations: Strings, numbers, booleans.
Cheap array methods: map or filter on small arrays (< 100 items).
Components that render often: If dependencies change every render, useMemo does nothing but add overhead.