React Compiler

React Compiler

React 19 introduces an experimental compiler that automatically optimizes your React code.

Historically, developers used useMemo, useCallback, and memo to manually optimize re-renders. The React Compiler aims to do this automatically.

What it does

• It memoizes values and functions automatically.
• It understands your code's data flow to prevent unnecessary re-renders.
• It produces code that is both performant and debuggable.

// Before (Manual Optimization):
const expensiveValue = useMemo(() => calculate(a, b), [a, b]);

// After (with React Compiler):
const expensiveValue = calculate(a, b); // Compiler handles memoization