React Compiler: Automatic Memoisation Without useMemo and useCallback

The React Compiler — previously known as React Forget — has entered open beta. It is a build-time tool that analyses React components and automatically inserts fine-grained memoisation, eliminating the need to manually write useMemo, useCallback, and React.memo in most cases.

What the Compiler Does

The compiler understands React's rules (no mutations to props/state during render, no side effects outside of effects) and uses that knowledge to determine exactly which computations need to be cached and which values can be shared between re-renders.

// You write this:
function ProductList({ products, filter }) {
    const filtered = products.filter(p => p.category === filter);
    return filtered.map(p => <ProductCard key={p.id} product={p} />);
}

// The compiler automatically memoises filtered and ProductCard renders
// — no useMemo or React.memo needed

How to Enable It

npm install babel-plugin-react-compiler

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

Compatibility

The compiler works with any React 17+ project. It validates that your code follows React's rules before applying optimisations — components that break the rules are skipped with a warning, so adoption can be incremental.

Meta's Production Results

Meta has been running the compiler on Instagram.com in production. Their results show a measurable reduction in unnecessary re-renders without any manual optimisation work from engineers.