← Blog
#React#frontend#performance#JavaScript#TypeScript

React Compiler v1.0: The End of Manual Memoization

webhani·

What React Compiler Does

React Compiler is a build-time tool that statically analyzes your React components and automatically inserts memoization where it's safe to do so. It entered public beta with React 19 in late 2024 and reached v1.0 stable in October 2025. React 19.2 (March 2026) builds on this foundation with additional server-side rendering improvements.

The practical result: useMemo, useCallback, and React.memo become optional in most cases. The compiler identifies which values change between renders and which don't, applying optimizations at a finer granularity than most developers would do by hand.

The Manual Memoization Problem

Before the compiler, performance optimization in React required explicit developer effort:

// Before: manual memoization
const ProductRow = React.memo(({ product, onAddToCart }: Props) => {
  const formattedPrice = useMemo(
    () => new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' })
          .format(product.price),
    [product.price]
  );
 
  const handleAdd = useCallback(() => {
    onAddToCart(product.id, product.sku);
  }, [onAddToCart, product.id, product.sku]);
 
  return (
    <tr>
      <td>{product.name}</td>
      <td>{formattedPrice}</td>
      <td><button onClick={handleAdd}>Add</button></td>
    </tr>
  );
});

The code works, but has failure modes. A missing product.sku in the useCallback dependency array produces a stale closure bug that only surfaces under specific interaction sequences. As a codebase grows, maintaining correct dependency arrays across hundreds of components is an ongoing source of subtle bugs.

After the Compiler

// After: the compiler handles it
function ProductRow({ product, onAddToCart }: Props) {
  const formattedPrice = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD'
  }).format(product.price);
 
  function handleAdd() {
    onAddToCart(product.id, product.sku);
  }
 
  return (
    <tr>
      <td>{product.name}</td>
      <td>{formattedPrice}</td>
      <td><button onClick={handleAdd}>Add</button></td>
    </tr>
  );
}

The compiler produces equivalent optimized output. formattedPrice is only recomputed when product.price changes. handleAdd is stable across renders when its dependencies haven't changed. No dependency arrays to maintain.

Setup

Next.js

Next.js 15+ includes compiler support via next.config.mjs:

// next.config.mjs
const nextConfig = {
  experimental: {
    reactCompiler: true
  }
};
 
export default nextConfig;

Vite

npm install babel-plugin-react-compiler@latest
// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
 
export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: ['babel-plugin-react-compiler']
      }
    })
  ]
});

What the Compiler Can't Optimize

The compiler operates on static analysis. Code that violates React's rules or uses mutable external references falls outside what it can safely optimize.

// The compiler skips optimization here
function BadComponent({ items }: Props) {
  // Rules of Hooks violation — conditional hook call
  if (items.length > 0) {
    const sorted = useMemo(() => [...items].sort(), [items]); // won't be optimized
  }
 
  return <List items={items} />;
}

When the compiler skips optimization, it emits a warning in the build output. Add eslint-plugin-react-compiler to catch these patterns before build time:

npm install eslint-plugin-react-compiler --save-dev
{
  "plugins": ["react-compiler"],
  "rules": {
    "react-compiler/react-compiler": "warn"
  }
}

What Teams Actually Report

Teams that adopted early didn't report dramatic performance wins — they reported the removal of a class of bugs. Stale dependency array issues stopped appearing in code review. The "why is this re-rendering?" bug category shrank. New components could be written without deciding upfront where to add memoization.

The wins compound over time, especially in larger codebases where inconsistent memoization tends to accumulate as tech debt.

Migration Approach

New projects: enable the compiler from the start. There's no reason not to.

Existing projects: don't attempt a full codebase conversion in one pass. Enable on new files first, confirm no regressions, then expand incrementally. Existing useMemo and useCallback calls coexist with the compiler — remove them gradually after verifying each component.

Fix Rules of Hooks violations first: the compiler needs clean code to optimize. Run eslint-plugin-react-hooks to surface these before enabling the compiler.

Summary

React Compiler stable shifts memoization responsibility from developer discipline to the build toolchain. The day-to-day impact is smaller than it sounds — fewer dependency array bugs, cleaner component code, and no performance cliff when someone forgets to wrap a handler.

Enable it in new projects immediately. For existing codebases, the incremental rollout approach is low-risk and the lint tooling makes it straightforward to identify where the compiler can't yet help.

← Back to Blog