React Compiler Goes Stable - The End of useMemo and useCallback

The React Compiler has officially gone stable in early 2026, marking a paradigm shift in how we write React applications. Say goodbye to manual memoization!

What is React Compiler?

React Compiler (formerly React Forget) automatically optimizes your React code at build time:

• Automatic memoization of components and values
• Dead code elimination for unused props
• Optimized re-renders without manual intervention

Before vs After

Before (Manual Optimization)

function ProductList({ products, onSelect }) {
  const sortedProducts = useMemo(
    () => products.sort((a, b) => a.price - b.price),
    [products]
  );

  const handleSelect = useCallback(
    (id) => {
      onSelect(id);
    },
    [onSelect]
  );

  return sortedProducts.map((p) => (
    <Product key={p.id} product={p} onSelect={handleSelect} />
  ));
}

After (React Compiler)

function ProductList({ products, onSelect }) {
  const sortedProducts = products.sort((a, b) => a.price - b.price);

  const handleSelect = (id) => {
    onSelect(id);
  };

  return sortedProducts.map((p) => (
    <Product key={p.id} product={p} onSelect={handleSelect} />
  ));
}

The compiler automatically detects and optimizes these patterns!

Setting Up React Compiler

npm install react-compiler-runtime
npm install -D babel-plugin-react-compiler

// babel.config.js
module.exports = {
  plugins: [['babel-plugin-react-compiler', {}]],
};

What Gets Optimized

The compiler optimizes:

1. Component renders - Skips re-rendering unchanged components
2. Expensive computations - Memoizes derived values
3. Event handlers - Maintains referential equality
4. Context consumers - Only re-renders when consumed values change

Rules of React Still Apply

The compiler works best when you follow the Rules of React:

• Components must be pure
• Props and state are immutable
• Hooks follow the rules of hooks

Performance Gains

In production apps, teams are reporting:

• 40-60% reduction in unnecessary re-renders
• Smaller bundle sizes (no memo/callback imports)
• Faster development (less boilerplate)

Migration Strategy

1. Enable the compiler in development mode first
2. Use the ESLint plugin to catch violations
3. Fix any impure components
4. Enable in production

React Compiler represents the future of React development—write simple code, get optimized apps.