DEV Community

Vikrant Bagal
Vikrant Bagal

Posted on

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

#react #javascript #react18 #performance

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

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

What is the Big Deal?

If you have been writing React for a while, you have 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 are 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 is something manual memoization struggles with.

Getting Started

Install the compiler:

npm install -D babel-plugin-react-compiler@latest
Enter fullscreen mode Exit fullscreen mode

Configure Babel:

// babel.config.js
module.exports = {
  plugins: [
    "babel-plugin-react-compiler" // Must run first!
  ]
};
Enter fullscreen mode Exit fullscreen mode

Optional configuration:

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

The Results Are Real

From Meta is production experience:

  • Initial loads and 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 cannot read your mind. Keep manual memoization for:

  • Effect dependencies — The compiler does not 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() will not 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 is 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.

Top comments (0)