React Compiler

Automatic optimization, memoization, compiler features, and migration.

Overview

React Compiler (React 19+) automatically optimizes components, eliminating manual memoization.

Key Concepts

• Automatic Memoization — Compiler adds memoization where needed
• No More useMemo/useCallback — Compiler handles optimization
• Strict Mode Compatible — Works with React's strict mode
• Migration Path — Gradual adoption from existing code
• Performance Gains — Reduced unnecessary re-renders

Code Examples

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

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

  return (
    <ul>
      {sortedProducts.map(product => (
        <ProductItem key={product.id} product={product} onClick={handleClick} />
      ))}
    </ul>
  );
}

// After: With React Compiler (automatic optimization)
function ProductList({ products, onSelect }) {
  const sortedProducts = [...products].sort((a, b) => a.price - b.price);

  return (
    <ul>
      {sortedProducts.map(product => (
        <ProductItem 
          key={product.id} 
          product={product} 
          onClick={() => onSelect(product.id)} 
        />
      ))}
    </ul>
  );
}

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

Practice

Migrate an existing React app to use the React Compiler and measure performance improvements.