React Compiler: How React Forget Is Revolutionizing Performance Automatically

Hello HaWkers, if you've spent hours adding useMemo, useCallback, and React.memo to your React code, I have good news. The React Compiler (formerly known as React Forget) has finally arrived to solve this automatically.

Let's understand how this revolution works and how it changes the way we write React in 2026.

The Problem the Compiler Solves

The React Developer's Pain

For years, React developers struggled with manual memoization.

Typical React code (before):

function ProductList({ products, onSelect, filters }) {
  // Do I need to memoize?
  const filteredProducts = useMemo(() => {
    return products.filter(p => matchesFilters(p, filters))
  }, [products, filters])

  // What about this callback?
  const handleSelect = useCallback((id) => {
    onSelect(id)
  }, [onSelect])

  // And the child component?
  return (
    <div>
      {filteredProducts.map(product => (
        <MemoizedProductCard
          key={product.id}
          product={product}
          onSelect={handleSelect}
        />
      ))}
    </div>
  )
}

const MemoizedProductCard = React.memo(ProductCard)

Problems:

Verbose and hard to read code
Easy to forget memoization
Easy to get dependencies wrong
Inconsistent performance
Constant cognitive overhead

How React Compiler Changes This

Same component with React Compiler:

function ProductList({ products, onSelect, filters }) {
  // Write normal code - compiler optimizes
  const filteredProducts = products.filter(p =>
    matchesFilters(p, filters)
  )

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

  return (
    <div>
      {filteredProducts.map(product => (
        <ProductCard
          key={product.id}
          product={product}
          onSelect={handleSelect}
        />
      ))}
    </div>
  )
}

// No need for React.memo!
function ProductCard({ product, onSelect }) {
  return (
    <div onClick={() => onSelect(product.id)}>
      {product.name}
    </div>
  )
}

The compiler automatically adds memoization where needed.

How React Compiler Works

Compile-Time Analysis

The compiler analyzes your code and automatically adds memoization during build.

Your JSX Code
      ↓
React Compiler (Babel/SWC plugin)
      ↓
Optimized Code with Memoization
      ↓
Final Bundle

What the Compiler Does

Example transformation:

// YOUR CODE
function Counter({ initialCount }) {
  const [count, setCount] = useState(initialCount)

  const increment = () => setCount(c => c + 1)

  const expensiveValue = computeExpensive(count)

  return (
    <div>
      <span>{expensiveValue}</span>
      <button onClick={increment}>+</button>
    </div>
  )
}

// COMPILED CODE (simplified)
function Counter({ initialCount }) {
  const [count, setCount] = useState(initialCount)

  // Compiler adds useMemo automatically
  const increment = useMemo(
    () => () => setCount(c => c + 1),
    [setCount]
  )

  // Compiler detects it's expensive and memoizes
  const expensiveValue = useMemo(
    () => computeExpensive(count),
    [count]
  )

  // Compiler memoizes JSX too
  return useMemo(() => (
    <div>
      <span>{expensiveValue}</span>
      <button onClick={increment}>+</button>
    </div>
  ), [expensiveValue, increment])
}

Compiler Rules

React Compiler follows the "Rules of React" to ensure safe optimizations.

Rules that must be followed:

Components must be pure
Props and state are immutable
Return values and hook arguments are immutable
Values passed to JSX are immutable

Performance Benchmarks

Real Gains

React Compiler showed significant gains in real applications.

Instagram benchmarks (Meta):

Metric	Before	After	Improvement
Unnecessary re-renders	Baseline	-25% to -40%	Significant
Initial load	Baseline	-5% to -10%	Moderate
Memory usage	Baseline	-10% to -15%	Moderate
INP (Interaction to Next Paint)	Baseline	-15% to -25%	Significant

Cases where gains are higher:

Long lists with many items
Components with many children
Frequent state updates
Callbacks passed as props

Configuring React Compiler

Installation

Step 1: Check compatibility

# Check if your code follows the rules
npx react-compiler-healthcheck

Step 2: Install the plugin

npm install -D babel-plugin-react-compiler
# or
npm install -D @react-compiler/swc-plugin

Step 3: Configure Babel

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

Or configure Next.js:

// next.config.js
module.exports = {
  experimental: {
    reactCompiler: true,
  },
}

Gradual Configuration

You can enable the compiler gradually.

Per file:

// Enables for this file
'use memo'

function MyComponent() {
  // ...
}

Exclude specific components:

// Disables for this component
'use no memo'

function LegacyComponent() {
  // Code that violates React rules
}

Migrating Existing Projects

Migration Strategy

Phase 1: Audit

# Run health check
npx react-compiler-healthcheck

# Example output:
# ✅ 245 compatible components
# ⚠️ 12 components with warnings
# ❌ 3 incompatible components

Phase 2: Fix Violations

// BEFORE - Violates rules
function SearchResults({ results, query }) {
  // Direct mutation
  if (query) {
    results.sort((a, b) => a.score - b.score)
  }
  return <ResultList items={results} />
}

// AFTER - Follows rules
function SearchResults({ results, query }) {
  const sortedResults = query
    ? [...results].sort((a, b) => a.score - b.score)
    : results

  return <ResultList items={sortedResults} />
}

Phase 3: Enable Gradually

Start with new components
Migrate simple components
Migrate complex components
Enable globally

The Future of React with Compiler

Roadmap

2026:

Stable release in Next.js
Support in more frameworks (Remix, Gatsby)
Improvements in pattern detection

2027:

Enabled by default in new projects
More aggressive optimizations
Integration with Server Components

Impact on Ecosystem

Documentation changes:

BEFORE:
"Always use useCallback for callbacks passed as props"

AFTER:
"Write normal code, the compiler optimizes automatically"

Conclusion

React Compiler represents the biggest change in how we write React since Hooks. Automatic memoization eliminates an entire class of bugs and cognitive overhead, allowing developers to focus on business logic.

Key points:

Eliminates need for useMemo, useCallback, React.memo
25-40% improvement in unnecessary re-renders
Cleaner and easier to maintain code
Gradual migration possible
Follows strict React rules

Recommendations:

Run the healthcheck on your project today
Start fixing rule violations
Gradually enable on new components
Remove manual memoization once compiler is stable

The future of React is writing simple code and letting the compiler do the heavy lifting.

For more on React evolution, read: Signals in JavaScript: The Future of Reactivity.