In this tutorial, you will learn how the React Compiler works, how automatic memoization is applied, and why hooks like useMemo and useCallback are rarely needed in React 19.

This topic is critical because many developers are still writing performance code that React now handles automatically.

What We Will Learn

• What the React Compiler is
• What automatic memoization means
• How React optimizes re-renders for you
• Why useMemo and useCallback are now mostly unnecessary
• When manual memoization is still valid

By the end, you will write simpler components with better performance and less code.

What Is the React Compiler

The React Compiler is a build-time compiler introduced with React 19 that analyzes your components and optimizes them automatically.

Instead of relying on developers to manually optimize renders, React now:

• Tracks which values actually change
• Skips unnecessary re-renders
• Memoizes computations and functions safely
• Preserves correctness

This happens without you writing extra hooks.

The Big Shift in Mental Model

Before React 19, performance optimization looked like this:

• Identify re-render problems
• Add useMemo
• Add useCallback
• Wrap components in React.memo
• Hope nothing breaks

In React 19, the model is:

Write simple, correct code. Let React optimize it.

This is the same philosophy React adopted for async rendering with Suspense.

What Is Automatic Memoization

Automatic memoization means React remembers the results of expressions and reuses them when inputs have not changed.

The compiler understands:

• Which props are read
• Which state values are used
• Which closures depend on which variables

It then memoizes only what is safe.

You do not opt in. It just works.

Example Without Manual Memoization

// components/counter.tsx
export function Counter({ step }: { step: number }) {
  const doubled = step * 2
 
  function increment(value: number) {
    return value + step
  }
 
  return (
    <div>
      <p>Doubled: {doubled}</p>
      <button>{increment(1)}</button>
    </div>
  )
}

In React 18, this would recreate:

• doubled
• increment

on every render.

In React 19, the compiler:

• Memoizes doubled
• Stabilizes increment
• Skips work when step does not change

No hooks required.

Why useMemo Is Now Rarely Needed

useMemo was created to solve a problem React now solves automatically.

Old pattern:

const expensiveValue = useMemo(() => compute(data), [data])

React 19:

const expensiveValue = compute(data)

If data does not change, React reuses the result.

Using useMemo now often adds:

• Noise
• Cognitive overhead
• Risk of incorrect dependency arrays

Why useCallback Is Also Rarely Needed

useCallback was used to prevent function identity changes.

const onClick = useCallback(() => {
  doSomething(value)
}, [value])

The compiler now understands closures.

It knows:

• What onClick depends on
• When it can be reused
• When it must be recreated

Manually wrapping callbacks often provides no benefit.

What About React.memo

Component memoization is also largely automatic.

React analyzes component boundaries and skips rendering when props are unchanged.

Manually wrapping everything in React.memo can:

• Hide real data flow
• Make debugging harder
• Provide little or no gain

React now treats memoization as an optimization detail, not an API you manage.

When Manual Memoization Is Still Valid

There are still edge cases where manual memoization is appropriate.

Use useMemo or useCallback when:

• You integrate with third party libraries that rely on reference equality
• You pass callbacks into non React systems
• You measure a real performance issue with profiling
• You intentionally want stable identity across renders

These should be exceptions, not defaults.

A Common Anti Pattern in React 19

const value = useMemo(() => {
  return count * 2
}, [count])

This is unnecessary.

It adds complexity without benefit and signals outdated thinking.

The Compiler Only Works If Code Is Clean

To benefit from the React Compiler:

• Avoid mutating objects
• Write pure functions
• Keep components predictable
• Avoid hidden side effects in render

Clean code enables better optimization.

How This Changes How You Write React

React 19 encourages you to:

• Remove defensive performance code
• Trust the framework
• Focus on correctness and clarity
• Optimize only when proven necessary

This makes components easier to read and maintain.

Mental Model

Think of the React Compiler like a smart assistant:

• You write straightforward code
• It analyzes dependencies for you
• It applies memoization where safe
• You do less work and get better results

Manual memoization becomes a specialized tool, not everyday syntax.

Conclusion

The React Compiler fundamentally changes how performance works in React 19.

Automatic memoization means:

• useMemo is rarely needed
• useCallback is rarely needed
• React.memo is rarely needed

Write clean, simple components and let React handle optimization.

If you are still reaching for memoization hooks by default, you are writing React the old way.