Capítulo 42 de 116

Chapter 42: React Compiler — Introduction

Core Idea

React Compiler is a build-time tool that automatically memoizes components and values, understanding the Rules of React well enough to eliminate most manual useMemo/useCallback/React.memo work without requiring any code rewrite.

Key Concepts

  • What it does: analyzes plain JavaScript/JSX at build time and automatically inserts the equivalent of memoization wherever it would help — components skip re-rendering when their inputs are unchanged, values/functions are recomputed only when their dependencies actually change, without a developer writing any of that by hand.
  • Why manual memoization was needed before: React is fast without optimization in most cases, but manually memoizing components/values/callbacks was sometimes necessary to keep a specific interaction responsive — the compiler's automatic version replaces that tedious, error-prone hand-tuning.
  • Should you try it?: the docs frame it as safe to try incrementally on an existing codebase — it only applies where it can verify the Rules of React are followed, and won't attempt to optimize code it can't prove is safe.
  • Build tool support: works as a Babel plugin, integrable into the major bundler/build-tool ecosystems (Vite, Next.js, etc.) rather than being tied to one specific framework.
  • What to do with existing useMemo/useCallback/React.memo calls: the docs' guidance is that they remain valid and don't need to be ripped out — the compiler works alongside existing manual memoization rather than requiring its removal first.

Key Takeaways

  1. React Compiler doesn't change your component code's behavior — it changes how efficiently already-correct code re-renders, contingent on that code actually following the Rules of React (Ch 114-116).
  2. Existing manual useMemo/useCallback/memo calls are safe to leave in place when adopting the compiler; removing them is optional cleanup, not a prerequisite.
  3. It's a build-time transform (via Babel), not a runtime library feature — its output is what actually ships.

Connects To

  • Ch 43 (Installation): setting the compiler up in a build.
  • Ch 92 (React Compiler — Configuration & Directives Reference): fine-grained control over what the compiler optimizes.
  • Ch 114-116 (Rules of React): the correctness rules the compiler relies on to decide what's safe to memoize.