English Vocabulary for the React Compiler

The React Compiler (previously called React Forget) is one of the most significant additions to the React ecosystem in years. It automatically optimizes React components and eliminates the need for manual useMemo and useCallback calls. As it moves into broader adoption, React developers need vocabulary to discuss it in code reviews, team meetings, and conference talks.

Key Vocabulary

Automatic Memoization Automatic memoization is the React Compiler’s core feature: it analyzes your components and hooks, determines which values and functions need to be memoized, and applies that memoization automatically. Developers say the compiler “applies,” “handles,” or “performs” automatic memoization. Example: “With automatic memoization enabled, we deleted all the hand-written useMemo calls in the component and the compiler handles it correctly.”

React Forget React Forget is the original internal name for the React Compiler project at Meta. It is still frequently used in conference talks and blog posts, especially in discussions of the compiler’s history. Developers may say “this was React Forget” or “the project formerly known as React Forget.” Example: “The React Compiler is what we publicly call what was internally React Forget — the goal was always to make manual memoization unnecessary.”

Compiler Directives Compiler directives are string literals placed at the top of a file or function to control compiler behavior. "use memo" opts a component into compilation; "use no memo" explicitly opts it out. Developers “add,” “apply,” or “use” directives. Example: “I added 'use no memo' at the top of the animation component because it uses a third-party library that violates the Rules of React.”

Rules of React The Rules of React are constraints that components and hooks must follow for the compiler to safely optimize them — for example, not mutating props, calling hooks at the top level, and not relying on referential identity of objects between renders. The compiler “enforces,” “checks,” or “validates” these rules. Example: “The compiler flagged a violation of the Rules of React because the component was mutating a prop object directly instead of creating a new one.”

useMemo / useCallback Elimination One of the compiler’s main benefits is that developers no longer need to manually wrap values in useMemo or functions in useCallback. The compiler “eliminates the need for,” “removes the requirement for,” or “makes redundant” these hooks. Example: “After enabling the compiler, we ran a codemod to remove all unnecessary useMemo and useCallback wrappers that the compiler now handles automatically.”

Compiler Output The compiler transforms your JavaScript or TypeScript source into optimized code. Developers “inspect,” “examine,” or “check” the compiler output to understand what the compiler did. The React DevTools playground shows the compiled output visually. Example: “I inspected the compiler output for this component and saw that it generated memoization wrappers around three expensive calculations.”

Concurrent Mode Integration The React Compiler is designed to work with React’s concurrent features — Suspense, transitions, and deferred values. Developers discuss “concurrent mode compatibility,” “working with concurrent features,” or “concurrent rendering support.” Example: “The compiler’s automatic memoization is especially valuable with concurrent mode because it reduces the work React does during deferred rendering.”

Opt-in / Opt-out The compiler supports gradual adoption — you can opt specific files or components in or out of compilation. Developers “opt in” a component or “opt out” a file. The entire application can be opted in via the Babel or SWC plugin configuration. Example: “We opted out the legacy form component because it uses a deprecated pattern that the compiler does not yet handle correctly.”

Common Phrases and Collocations

“enable the React Compiler” The standard phrase for adding the compiler plugin to your build configuration. “Enable” — not “install” or “activate.” Example: “Enable the React Compiler by adding the Babel plugin to your build config and setting the target to your React version.”

“the component violates compiler rules” Used when the compiler detects a Rules of React violation and skips that component. “Violates” is the standard verb. Example: “The compiler skipped this component because it violates compiler rules — specifically, it reads from a ref during render.”

“inspect the compiled output” Used when verifying what the compiler generated. Always “inspect” in professional discussions — more precise than “look at” or “check.” Example: “Inspect the compiled output in the React DevTools playground to verify the compiler is memoizing the expensive calculation.”

“gradual adoption” Describes rolling out the compiler incrementally across a codebase rather than enabling it everywhere at once. Teams “take a gradual adoption approach” or “adopt the compiler gradually.” Example: “We took a gradual adoption approach — enabling the compiler file by file in a monorepo over three sprints.”

“compiler bail-out” When the compiler cannot safely optimize a component due to a rules violation, it “bails out” — leaves that component unchanged. Developers “see a bail-out,” “trigger a bail-out,” or “investigate why the compiler bailed out.” Example: “The compiler bail-out on the data table component means it will still rely on manual useMemo until we refactor the mutation.”

Practical Sentences to Practice

1. “After enabling the React Compiler, our bundle re-renders dropped significantly without any manual memoization changes.”
2. “The component violates compiler rules because it mutates the items array in place — we need to return a new array instead.”
3. “Add 'use no memo' to any component that uses direct DOM manipulation outside of React’s model.”
4. “Inspect the compiled output to confirm the compiler is correctly identifying which props can change between renders.”
5. “We plan gradual adoption — starting with the stateless utility components where violations are least likely.”

Common Mistakes to Avoid

Saying “the compiler memoizes the component” The compiler memoizes values and functions inside the component, not the component itself. The correct phrase is “the compiler memoizes the expensive calculation” or “the compiler applies memoization to the hook’s return value.”

Confusing “opt in” and “opt out” With the Babel plugin configured globally, components are opted in by default. Saying a component is “opted in” when you mean the whole project is enabled is imprecise. Specify the scope: “the entire project is opted in” vs “this specific file is opted out.”

Calling directives “comments” "use memo" and "use no memo" are string literal directives, not comments. Calling them “comments” is incorrect — they are evaluated JavaScript strings, similar to "use strict" or "use client" in React Server Components.

Summary

The React Compiler introduces a focused vocabulary — automatic memoization, compiler directives, Rules of React, bail-outs, and gradual adoption — that you will encounter frequently in React team discussions, RFC discussions on GitHub, and conference talks from the React core team. The best resource for natural English exposure is the React Compiler RFC on GitHub and the Meta Engineering blog posts about React Forget, where the engineers who built the compiler explain their decisions in clear, professional English.

Navigating the React Compiler: A Practical Approach to Technical English

The React Compiler – a cornerstone of modern React development – often generates complex discussions around optimization, performance, and even the feel of your code. While technical proficiency is paramount, being able to articulate these concepts clearly in English, particularly when collaborating with other developers or presenting work, can significantly elevate your effectiveness. This isn’t about replacing precise technical terms but understanding how those terms are used within a professional context – framing discussions effectively and communicating intentions accurately. A key element is recognizing that React development isn’t just about writing code; it’s about describing the rationale behind that code, particularly when dealing with advanced optimizations like memoization.

One area where many developers struggle is translating technical jargon into understandable explanations. For example, a senior developer might say to you, “We need to aggressively optimize this component’s render performance using compiler directives; it’s becoming a bottleneck.” While technically correct, that statement lacks context for someone less familiar with the underlying principles. A more approachable phrasing would be, “This component is rendering frequently and potentially impacting overall performance. Let’s explore how we can leverage memoization techniques—using compiler directives to help React only re-render when necessary – to improve its efficiency.” The key difference here isn’t a change in the technical meaning but in the clarity of communication, focusing on the problem and the solution rather than just throwing around technical terms. Similarly, when documenting changes in a PR, avoid simply stating “Applied memoization.” Instead, explain why you applied it: “Implemented memoization to prevent unnecessary re-renders of this component, improving performance by caching its output.”

Effective communication also extends to understanding compiler directives and the resulting compiled output. These aren’t just lines of code; they’re instructions that guide React’s behavior during compilation. When reviewing a PR with significant changes in this area, you might see comments like, “The generated output appears overly aggressive – are we sure all branches are being memoized?” This phrasing highlights a concern about potential inefficiencies and invites a discussion about the specific directives and their impact on the component’s rendering lifecycle. It’s vital to understand that React’s compiler isn’t just passively translating code; it’s actively optimizing based on those directives, and understanding how those optimizations are being applied is crucial for effective debugging and performance tuning.

Here’s an example of how a babel command might be used in this context:

babel src/components/ExpensiveComponent.js --plugins react-memo,'@babel/preset-react' --output-file dist/components/ExpensiveComponent.js

This command demonstrates the use of Babel and specific plugins to generate optimized JavaScript code for ExpensiveComponent, incorporating memoization techniques driven by compiler directives. Recognizing this level of detail – the tools involved, the configuration options, and the intended outcome – allows you to participate more effectively in discussions around React performance.