Back to DocsRecipe

React Compiler

The React Compiler is an experimental build-time tool that automatically memoizes components, hooks, and values. It eliminates manual useMemo, useCallback, and React.memo by inferring dependencies from your source.

How it works

The compiler analyzes your JavaScript at build time, tracking every read of a reactive value. When a value hasn't changed since the last render, the compiler skips re-executing the component body. This is the same mental model as a spreadsheet — only cells whose inputs changed recalculate.

Rules of React

The compiler enforces the Rules of React at build time. Components must be pure functions, hooks must not be called conditionally, and side effects belong in event handlers or useEffect. Violations produce clear compiler diagnostics instead of silent runtime bugs.

Adoption path

Enable the compiler per-directory via the Babel plugin or the experimental Next.js flag. Start with a leaf component that has no manual memoization — remove the useMemo calls and let the compiler take over. The React team recommends enabling it on 100% of your codebase; it is designed to be sound for all idiomatic React.

Meridian bundles the React Compiler by default in all Next.js templates starting with v2.4. No configuration required.