React Compiler Has a Free API That Most Developers Don't Know About

React Compiler (formerly React Forget) automatically optimizes React components by eliminating unnecessary re-renders. No more manual useMemo, useCallback, or React.memo.

How It Works

React Compiler analyzes your components at build time and automatically adds memoization where needed.

// Before: you wrote this
function TodoList({ todos, filter }) {
  const filtered = useMemo(
    () => todos.filter(t => t.status === filter),
    [todos, filter]
  );
  const handleClick = useCallback((id) => {
    markComplete(id);
  }, []);
  return filtered.map(t => <Todo key={t.id} todo={t} onClick={handleClick} />);
}

// After React Compiler: just write normal code
function TodoList({ todos, filter }) {
  const filtered = todos.filter(t => t.status === filter);
  const handleClick = (id) => markComplete(id);
  return filtered.map(t => <Todo key={t.id} todo={t} onClick={handleClick} />);
}
// The compiler handles memoization automatically!

Setup with Babel

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

Setup with Next.js

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

ESLint Plugin

npm install eslint-plugin-react-compiler

// eslint.config.js
import reactCompiler from "eslint-plugin-react-compiler";
export default [{
  plugins: { "react-compiler": reactCompiler },
  rules: { "react-compiler/react-compiler": "error" }
}];

What It Optimizes

• JSX elements — skips re-rendering unchanged subtrees
• Expensive computations — auto-memoizes derived values
• Callbacks — stabilizes function references
• Context consumers — only re-renders on relevant changes

Rules of React (Enforced)

The compiler requires your code follows React rules:

• Components must be pure (same props = same output)
• No mutations during render
• Props and state are immutable

---

Need to scrape or monitor web data at scale? Check out my web scraping actors on Apify — ready-made tools that extract data from any website in minutes. Or email me at [e-mail] for custom solutions.