React Compiler Changes When to Reach for useMemo

React Compiler 1.0 changes the default. React.memo, useCallback, and useMemo no longer need to appear automatically in every performance-minded component. The compiler handles routine rendering memoization during the build and can do it more granularly than a hand-written wrapper.

That does not make the manual APIs obsolete. It means I want a specific reason before I use one.

Before and After

Before: developers wrapped components in React.memo, dependencies in useCallback, and expensive calculations in useMemo, then maintained the dependency arrays by hand.

After: the compiler analyzes the code and memoizes values used in rendering. It can apply that memoization conditionally.

This code:

function Form({ onSubmit, onMount }) {
  // your component logic
}

The compiler can make this behave as if onSubmit and onMount were wrapped in useCallback and Form in React.memo. It supplies those optimizations during the build.

The component stays easier to read, and the compiler can find opportunities that would be tedious to maintain by hand. It is the same reason I prefer TypeScript to comments that promise a value has the right shape: let the tool enforce what it can.

When You Still Need Manual Memoization

Important One place: useEffect dependencies. If you pass a value to useEffect and want to control when it runs, wrap it in useMemo.

The official React blog explains this: manual memoization guarantees reference stability for effect dependencies. The effect only runs when the dependency changes in value, not on every render.

Setting It Up

React Compiler requires React 19+. For React 17 or 18, you also need react-compiler-runtime@latest.

Warning The compiler assumes your components follow the Rules of React (no side effects during render, stable hook ordering). Code that breaks these rules will produce incorrect optimizations silently.

With Next.js

Next.js 16 has the compiler integrated. Update your config:

// next.config.js
const nextConfig = {
  experimental: {
    reactCompiler: true,
  },
};

Next.js handles the Babel plugin setup automatically.

With Vite

Vite uses esbuild by default, so you add the Babel plugin manually. The trade-off: automatic memoization at the cost of Babel overhead in your build.

Install:

npm install babel-plugin-react-compiler@latest

Configure:

// vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: ["babel-plugin-react-compiler"],
      },
    }),
  ],
});

The React Compiler must run first in your Babel plugin pipeline. @vitejs/plugin-react handles this when configured as shown.

Measure the build tradeoff Pure esbuild builds are fast. Adding the React Compiler introduces Babel, which is slower. For most projects, runtime performance gains outweigh the build time cost. If your codebase is large and build time is critical, benchmark both.

The Vite team is working with oxc on native compiler support. Once that ships alongside Rolldown, you get automatic memoization without Babel. The React docs will update with migration info when that happens.

A cautious adoption path

1. Update to React 19+ (or 17/18 with react-compiler-runtime)
2. Install the compiler: npm install babel-plugin-react-compiler@latest
3. Configure it (Next.js: experimental flag, Vite: Babel plugin)
4. Remove React.memo from components where it is not needed
5. Remove most useCallback/useMemo (keep for useEffect deps)
6. Watch your bundle size and build times

The React Compiler installation guide has framework-specific setup for Next.js, Remix, Vite, and others. The Next.js 16 announcement covers Turbopack details.

I would remove memoization one component at a time and watch behavior, bundle size, and build time. The compiler can own routine rendering optimizations; manual memoization remains useful when reference stability is part of the component’s behavior.

That is the same threshold I use for React Router loaders and React Query: start with the smaller mechanism and let observed behavior earn the extra layer.