React Compiler 1.0 Is Here: Can We Finally Delete useMemo and useCallback? JeariCk

October 2025. React officially shipped React Compiler 1.0 stable. If you’ve been offline from the React ecosystem for a couple of years, you might shrug — “meh, another new tool.” But this one’s different. It’ll probably change how you write code for the next few years.

react logo

What Actually Is This Thing?

Put simply, React Compiler is a build-time optimization tool. When you run your build, it walks through your code, figures out which calculations can be cached, which functions should be memoized, which components don’t need to re-render — then injects the optimization logic for you. You write nothing. It does the work.

The internal codename was React Forget, as in “forget about manual optimization.” The React team started this back in 2022 and spent over three years pushing it to stable.

One sentence for the core change: most of the `useMemo`, `useCallback`, and `React.memo` you’ve been writing by hand — you won’t need them anymore.

The Pain of Manual Optimization Was Real

If you’ve written React for more than two years, you know the drill.

Early in a project, code is clean:

```jsx
function ProductList({ products, filter }) {
 const filtered = products.filter(p => p.category === filter);
 const sorted = filtered.sort((a, b) => a.price - b.price);
 const total = sorted.reduce((sum, p) => sum + p.price, 0);

return (
  <div>
  <p>Total: {total}</p>
  <p>
{sorted.map(p => <productcard key="{p.id}" product="{p}"></productcard>)}
</p>
</div>
)
}
 ```

Then performance starts slipping, and you pile on memos one by one:

```jsx 
function ProductList({ products, filter }) {
 const filtered = useMemo(
 () => products.filter(p => p.category === filter),
 [products, filter]
 );
 const sorted = useMemo(
 () => [...filtered].sort((a, b) => a.price - b.price),
 [filtered]
 );
 const total = useMemo(
 () => sorted.reduce((sum, p) => sum + p.price, 0),
 [sorted]
 );
return (
<div>
<p>Total: {total}</p>
<p>{sorted.map(p => <productcard key="{p.id}" product="{p}"></productcard>)}</p>
</div>
)
}
 ```

Annoying, right? Worse is spending hours tracking down a wrong dependency array. Or inheriting code with useContextSelector sprinkled everywhere and dozens of memo wrappers — modifying it feels like defusing a bomb, and you never know who to blame when it blows up.

The React team knows. Lauren Tan, who leads the React Compiler effort, said something honest at launch: “We spent years teaching developers how to use useMemo. Now we’re telling them they don’t need to — yeah, that’s ironic. But we think this is the right direction.”

How Does It Work?

React Compiler doesn’t work at runtime. It does static analysis of your code at compile time, using mature compiler techniques — control flow analysis, data flow analysis, and a custom SSA (Static Single Assignment) IR.

You write:

```jsx
function UserProfile({ user }) {
 const displayName = `${user.firstName} ${user.lastName}`.toUpperCase();
 return (
  <>
    <h1 class="wp-block-heading">{displayName}</h1>
    <h1 class="wp-block-heading"></h1>
  <>
);
}
 ```

The compiler figures out that `displayName` only needs to recompute when `user` changes, and automatically adds caching. You never see this — your source stays clean.

React Compiler follows a constraint system called “Rules of React.” If your code plays by the rules — no direct state mutation, no changing hook call order — the compiler can safely optimize it. The eslint-plugin-react-hooks ruleset is now wired into the compiler, so running ESLint tells you upfront which bits the compiler can’t handle.

If you genuinely need manual control on a file, add `”use no memo”;` at the top — the compiler will skip it. It’s an escape hatch, but you probably won’t use it much.

next.js – a React application development framework

Ecosystem Integration

Adoption was faster than I expected.

Next.js has supported React Compiler since 15.3.1. Next.js 16 enables it by default — new projects get it with zero config.

Expo SDK 54 and above enables the compiler by default too, which is good news for React Native devs. Mobile performance optimization has always been a pain, and most RN projects have embarrassingly low memo coverage.

Vite has a gotcha. `@vitejs/plugin-react` v6 paired with Vite 8 replaced the built-in Babel with oxc, so the old `react({ babel: { plugins: […] } })` syntax no longer works. The correct approach is using `reactCompilerPreset()` exported from `@vitejs/plugin-react`.

There’s also an swc plugin in the works, targeting faster build performance. Keep an eye on it if build speed matters to you.

The Good and the Gotchas

good news

– New projects get automatic optimization with zero config
– ESLint catches code the compiler can’t handle before you ship
– Next.js, Expo, Vite all shipped support pretty much day one
– Bundle size impact on small projects is basically zero

Watch out for

– Don’t blindly delete hooks on old projects. Removing useMemo or useCallback could introduce infinite re-render loops — the compiler’s logic might conflict with your existing manual caching strategy. Safe path: enable the compiler first, verify it works, then gradually clean up.
– Effect dependencies are still on you. The compiler won’t touch `useEffect` dependency management. Precise control over when effects fire is a different problem.
– Code must follow the Rules of React. If it doesn’t — say you mutate props directly or call hooks out of order — the compiler silently skips it without error. Get eslint-plugin-react-hooks to zero warnings before flipping the switch.

So What Now?

React Compiler 1.0 isn’t experimental anymore. It’s ready for production. One sentence summary: we’ve moved from “optimize by convention” to “optimize by compiler.”

Your next new React project probably already has this built in. Write clean code, and the compiler does the dirty work. As for the useMemo and useCallback in your old projects — leave them alone for now. Let the compiler stabilize in your setup, then clean up at your own pace.

Good code was never about “it looks optimized.” It’s about “it doesn’t lag + you can actually read it.”