React Compiler 1.0 in practice: do you still need useMemo?

React Compiler reached 1.0 in October 2025. It is a build-time tool that analyzes components and inserts memoization for you, so most useMemo, useCallback and React.memo calls become unnecessary.

Before and after

You write plain code:

1function ProductList({ products, query }: Props) {
2  const visible = products.filter((p) => p.name.includes(query));
3

4  const onSelect = (id: string) => track('select', id);
5

6  return visible.map((p) => (
7    <ProductCard key={p.id} product={p} onSelect={onSelect} />
8  ));
9}

The compiler memoizes visible and onSelect where it is safe. No manual hooks, no dependency arrays to get wrong.

Enable it in Next.js

Next.js supports the compiler through a config option (it requires the Babel plugin, so builds are slightly slower):

1// next.config.ts
2import type { NextConfig } from 'next';
3

4const nextConfig: NextConfig = {
5  reactCompiler: true,
6};
7

8export default nextConfig;

Install the plugin first: npm install --save-dev babel-plugin-react-compiler.

Adopt incrementally

Start with an opt-in mode, so only annotated components are compiled:

1// babel config
2module.exports = {
3  plugins: [['babel-plugin-react-compiler', { compilationMode: 'annotation' }]],
4};

1function HeavyChart(props: ChartProps) {
2  'use memo';
3  // ...
4}

Once the team is comfortable, switch to compiling everything and use 'use no memo' to opt out specific components that misbehave.

It relies on the Rules of React

The compiler assumes components are pure and that you do not mutate props, state or values during render. The lint rules in eslint-plugin-react-hooks flag violations. Fix those first, because code the compiler cannot prove safe is skipped rather than broken.

When to keep manual memoization

• A value used as an effect dependency where you need precise control over when it changes.
• Existing, well-tested code. Do not rip it out just because you can.

Measure

Use the React DevTools Profiler before and after. The benefit shows up in render-heavy screens; for small apps the difference may be invisible, but the code is simpler either way.

Sources and further reading

• React Compiler documentation