The React Compiler (No More useMemo)

Automatic Optimization

The Shift: React 19 introduces the React Compiler (optional build tool). It automatically memoizes your components and values.

👀 Preview

The compiler automatically optimizes your code at build time, so you can write natural JavaScript without manual memoization.

📚 Explanation

The React Compiler is a build-time Babel plugin (`babel-plugin-react-compiler`) that rewrites each component with fine-grained memoization baked in: every expression that depends on props or state gets its own cache slot, so a re-render recomputes only what actually changed — subsuming `useMemo`, `useCallback` and `React.memo` in one pass. Three things to know for interviews: (1) it's opt-in build tooling, not a runtime feature — your code still runs without it, just with more re-renders; (2) it only optimizes components that follow the Rules of React (pure render, no in-place mutation of props/state) and safely skips ones that don't — `eslint-plugin-react-compiler` surfaces those violations; (3) you can opt a single component out with the `"use no memo"` directive. Manual `useMemo` remains occasionally right for non-render caching (e.g. an expensive value shared with effects), but as a re-render optimization it becomes compiler output.