When React Compiler Replaces Manual Memoization

On this page

React developers have long used useMemo and useCallback to avoid expensive recalculations and preserve stable references. React Compiler changes that default by applying many optimizations at build time—but only in code where the compiler is enabled and able to optimize. The useful question is no longer whether to memoize everything, but when manual control still improves the result.

The original use case: preventing unnecessary renders

React's reconciliation is efficient, but unnecessary re-renders can still cost performance in complex applications. The two hooks addressed that from different sides:

  • useMemo caches the result of a computation and recalculates only when its dependencies change.
  • useCallback caches a function reference so a child that receives it as a prop does not re-render because the reference changed.

That made sense when React re-rendered more aggressively and components often relied on referential equality to decide whether to update.

Why most components no longer need them

React Compiler changes the default when it's enabled

React Compiler is a build-time optimizer. When configured for an application, it can automatically memoize values, functions, and component output, reducing the need for manual hooks.

React's automatic batching is a separate feature. Batching state updates does not replace memoization, and upgrading React alone does not mean the compiler is running.

For existing applications, I would leave working memoization in place until testing and profiling justify changing it. Removing hooks can change compilation output and performance characteristics.

Memoization holds memory

useMemo and useCallback keep references alive longer than the code needs them, and when they are applied everywhere, that retained memory plus the dependency comparisons can make performance worse instead of better.

Inline functions are cheap

Many developers add useCallback out of habit, believing it prevents re-renders, when modern JavaScript engines already handle inline functions efficiently. V8 allocates and collects short-lived functions declared inside a component cheaply, and a stable function reference only matters when something downstream actually compares it.

Measure before adding memoization

React.memo can skip rendering a child when its props are unchanged. It doesn't make unstable props stable, and it doesn't fix every expensive render.

With React Compiler enabled, much of this optimization can happen automatically. Without the compiler, memo, useMemo, and useCallback remain useful when a measured performance problem calls for them. I would start by keeping state local, avoiding unnecessary effects, and profiling the interaction that feels slow.

When I still use useMemo or useCallback

The hooks still have a place in a few specific situations:

  1. Computationally expensive operations. When a component runs an expensive calculation, useMemo keeps it from running on every render.

    const result = useMemo(() => computeExpensiveValue(data), [data]);

  2. Dependencies in custom hooks. When a hook depends on function identity, useCallback keeps the reference stable between renders.

    const fetchData = useCallback(() => fetch(apiUrl), [apiUrl]);
useEffect(() => { fetchData(); }, [fetchData]);

  3. Context providers. When a provider passes functions through React Context, useCallback keeps consumers from re-rendering on every provider render.

  4. Objects in dependency arrays. When an object is a dependency of useEffect or another hook, useMemo gives it a stable reference.

    const memoizedOptions = useMemo(() => ({ limit: 10 }), []);

  5. A visible UX problem. I start without either hook and add one when I see lag, stuttering animations, or slow renders in a complex component, after profiling shows where the bottleneck is.

My default is to keep React code clear and let the compiler handle the optimizations it can. I still use manual memoization when I need precise control or when profiling shows a real benefit. The hooks aren't obsolete; they're becoming more deliberate tools.

Related writing