React Compiler v1.0: The End of useMemo and useCallback?

Question

React Compiler v1.0 is a build-time tool that automatically handles memoization for you. Released October 2025, it's already powering production apps at Meta, Sanity Studio, and Wakelet. Your manual useMemo/useCallback calls might become a thing of the past.

---

What's the Big Deal?

If you've been writing React for a while, you've probably spent countless hours thinking about when to use useMemo, useCallback, or React.memo. These are performance optimizations that prevent unnecessary re-renders—but they're easy to get wrong.

React Compiler fixes this by doing the memoization for you. Automatically. At build time.

"The compiler transforms your code into a form that checks whether values changed from the previous render, automatically inserting memoization logic." — React Docs

---

How Does It Work?

The compiler uses a 9-step pipeline:

1. AST Parsing — Reading your code
2. HIR (High-Level Intermediate Representation) — Building a control flow graph
3. SSA Conversion — Simplifying variable assignment
4. Validation — Checking for Rules of React violations
5. Type Inference — Understanding your types
6. Effect Analysis — Detecting side effects
7. Reactive Analysis — Finding reactive values
8. Cache Unit Determination — Deciding what to memoize
9. Code Generation — Outputting optimized JavaScript

The key insight: it performs granular memoization even after early returns. That's something manual memoization struggles with.

---

Getting Started

Install the compiler:

npm install -D babel-plugin-react-compiler@latest

Configure Babel:

// babel.config.js
module.exports = {
  plugins: [
    'babel-plugin-react-compiler', // Must run first!
  ]
};

Optional configuration:

module.exports = {
  plugins: [
    ['babel-plugin-react-compiler', {
      target: '19',
      compilationMode: 'automatic', // or 'annotation'
      panicThreshold: 'all',
    }]
  ]
};

---

The Results Are Real

From Meta's production experience:

• Initial loads & cross-page navigations: up to 12% faster
• Certain interactions: up to 2.5× faster
• Memory usage: neutral (no increase)

---

When to Keep Manual Memoization

The compiler can't read your mind. Keep manual memoization for:

• Effect dependencies — The compiler doesn't touch useEffect
• Truly expensive computations — You know better than the compiler
• External integrations — Third-party code outside the compilation scope

---

Important Limitations

• ❌ No class component support — Convert to functions first
• ❌ No dynamic code — eval() won't work
• ❌ External functions — Not automatically memoized

---

Migration Strategy

1. Convert class → function components
2. Install and configure the compiler
3. Start with compilationMode: 'annotation' for gradual rollout
4. Fix ESLint violations systematically
5. Verify with React DevTools (look for "Memo ✨" badge)

---

Is It Production-Ready?

Absolutely. The compiler is already being used in production by:

• Meta (obviously)
• Sanity Studio
• Wakelet

It's now stable and ready for your app too.

---

Final Thoughts

React Compiler represents a shift in how we think about React performance. Instead of manually micromanaging memoization, we can focus on writing clean, declarative code and let the compiler handle the optimization.

Will useMemo and useCallback disappear entirely? Probably not—but their role will diminish significantly.

What do you think? Is auto-memoization the future of React, or do you prefer having manual control? Let me know in the comments!

---

Thanks for reading! If you found this useful, consider connecting with me on LinkedIn.