React Compiler

ELI5 - The Vibe Check

React Compiler is React finally doing your homework for you. For years you had to sprinkle useMemo and useCallback everywhere like protective salt to stop unnecessary re-renders. Now a build time compiler reads your component, figures out what actually needs memoizing, and inserts the optimization itself. You write normal code, it quietly makes it fast.

Real Talk

React Compiler is a build time tool (previously known as React Forget) that automatically memoizes components and values by statically analyzing your code's dependencies, eliminating the need for manual useMemo, useCallback, and React.memo calls in most cases. It ships as a Babel plugin and requires components to follow the Rules of React to compile safely.

Show Me The Code

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

// No manual memoization needed anymore:
function ProductList({ items }) {
  const sorted = items.slice().sort(); // auto-memoized
  return sorted.map(i => <Item key={i.id} {...i} />);
}

When You'll Hear This

"We ripped out half our useMemo calls after turning on React Compiler." / "React Compiler flagged a rule violation, so it just skipped memoizing that component."