React Compiler: Vocabulary for Automatic Memoisation and the Forget Algorithm

React Compiler (previously known internally as the Forget project) changes how React developers think about performance. Instead of manually wrapping code in useMemo and useCallback, the compiler handles optimisation automatically. Understanding the English vocabulary around this tool will help you read documentation, discuss pull requests, and follow conference talks confidently.

Core Compiler Concepts

React Compiler — a build-time tool that analyses your React components and hooks, then automatically inserts memoisation where appropriate, without changing the runtime behaviour of your code.

“We upgraded to React Compiler last sprint, so we removed all the manual useMemo calls from the dashboard components.”

Forget algorithm — the internal name for the compiler’s core optimisation strategy, which identifies values that do not need to be recomputed on every render and caches them automatically.

“The Forget algorithm detected that our price calculation was being rerun unnecessarily on every keystroke.”

automatic memoisation — the process by which the compiler, rather than the developer, decides which values and callbacks to cache between renders.

“Automatic memoisation means we no longer have to audit every component for missing useCallback wrappers.”

data-flow analysis — the technique the compiler uses to trace how values move through your component tree, determining which outputs depend on which inputs.

“Data-flow analysis allows the compiler to know that this derived value only changes when the user ID prop changes.”

Rules and Constraints

Rules of React — the set of conventions your code must follow for the compiler to work correctly, including writing pure render functions and not mutating props or state directly.

“Before enabling the compiler, the team ran a lint pass to make sure the codebase followed the Rules of React.”

use no memo — a special directive ("use no memo") you can place at the top of a component or hook to opt it out of compiler optimisation, useful for debugging or edge cases.

“We added use no memo to that legacy component while we investigated the unexpected re-render.”

compiler assumption — a premise the compiler makes about your code based on the Rules of React; violating an assumption can cause the compiler to produce incorrect output or skip optimisation.

“Breaking a compiler assumption by mutating a local array in place caused the memoised value to become stale.”

Compiler Output and Tooling

compiler output — the transformed JavaScript the compiler produces after analysing your source; it looks like normal React code but includes generated cache variables and conditional checks.

“Inspecting the compiler output helped us understand why a particular value was being cached across two separate render paths.”

React DevTools Compiler tab — a panel added to the React DevTools browser extension that shows which components have been optimised by the compiler and highlights any components that were skipped.

“The React DevTools Compiler tab showed three components in red, meaning the compiler could not optimise them due to dynamic property access.”

compiled component — a React component whose output has been processed and transformed by the compiler to include automatic memoisation logic.

“After the migration, every compiled component in our app saw a measurable reduction in wasted renders.”

bail-out — when the compiler decides it cannot safely optimise a component or hook and leaves it unchanged, typically because the code violates one of the Rules of React.

“The compiler issued a bail-out on the analytics hook because it read from a mutable global variable.”

Performance and Migration Vocabulary

wasted render — a render cycle in which a component re-executes but produces the same output as before, meaning the work was unnecessary; the compiler aims to eliminate these.

“Profiling revealed dozens of wasted renders in the sidebar that automatic memoisation has now eliminated.”

incremental adoption — the recommended approach to enabling the compiler in an existing codebase, activating it for one directory or one package at a time rather than all at once.

“We used incremental adoption to roll out the compiler to the checkout flow first before touching the rest of the app.”

eslint-plugin-react-compiler — an ESLint plugin that checks your code for violations of the Rules of React before you enable the compiler, helping you catch problems at the linting stage.

“Running eslint-plugin-react-compiler in CI blocked several PRs that would have caused compiler bail-outs in production.”

Practice

Read the official React Compiler documentation and look for the phrases data-flow analysis, bail-out, and incremental adoption. Try explaining to a colleague in English why the compiler performs a bail-out on a component that mutates its props directly, using at least three terms from this post.