React Compiler (Forget) in 2026: No More useMemo

For years, React developers have lived with a specific kind of anxiety: the constant fear of unnecessary re-renders. We littered our codebases with useMemo and useCallback, trying to manually hint to the framework what it shouldn't rebuild.

In 2026, those days are officially behind us. The React Compiler (originally codenamed React Forget) is now the standard across the ecosystem.

The Problem with Manual Optimization

While React's mental model—"UI as a pure function of state"—is beautiful, the reality of execution was messy. If a parent component re-rendered, every child re-rendered unless wrapped in React.memo. If you passed an inline function or an object literal as a prop, you broke the memoization.

This led to "performance whack-a-mole," where fixing one prop identity issue just moved the bottleneck somewhere else.

Enter the React Compiler

The React Compiler shifts the burden of performance from the developer to the build tool.

It analyzes your JavaScript/TypeScript code at compile time. It understands the data flow and the dependency graphs of your components. Because React has strict structural rules (the Rules of Hooks), the compiler can safely predict when a value will change.

How it works:

1. 2.
   Analysis: The compiler parses your component into a Control Flow Graph.
2. 4.
   Memoization Injection: It automatically inserts internal, highly optimized memoization wrappers around your variables, jsx elements, and functions.
3. 6.
   Execution: At runtime, React only re-evaluates the exact sub-trees that changed, achieving a level of fine-grained reactivity previously only seen in frameworks like Solid.js or Svelte.

What This Means for Your Code

The most significant change is what you don't have to write anymore:

tsx
// ❌ 2024 (Manual Memoization)
export function Dashboard({ user, data }) {
  const processedData = useMemo(() => expensiveProcess(data), [data]);
  
  const handleSave = useCallback(() => {
    saveUser(user);
  }, [user]);

  return <Graph data={processedData} onSave={handleSave} />;
}

// ✅ 2026 (React Compiler)
export function Dashboard({ user, data }) {
  // Let the compiler figure it out.
  const processedData = expensiveProcess(data);
  const handleSave = () => saveUser(user);

  return <Graph data={processedData} onSave={handleSave} />;
}

Can I still use useMemo?

Technically, yes. If the compiler encounters an extremely complex, dynamic structure it can't safely analyze, it will bail out and let React behave normally. You can still manually memoize in these rare edge cases. But for 99% of your components, it's unnecessary overhead.

Conclusion

The React team chose a difficult path: instead of changing the framework to use Signals (which would require learning a new mental model), they built a compiler that makes the existing mental model blazingly fast.

The React Compiler is the biggest leap forward for the React ecosystem since Hooks. Write simple code, and let the compiler make it fast.