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.

In Practice: Navigating Feedback & Collaboration

Let’s be honest, understanding technical jargon can feel incredibly isolating when you’re learning a new language. It’s not just about knowing what something does; it’s about how someone else describes it, the nuances of their phrasing, and how to respond effectively in a professional setting. The Forget algorithm, as we’ve discussed, is fundamentally about reducing unnecessary re-computations – optimizing performance by remembering that certain data hasn’t changed. But translating that concept into clear, actionable feedback during a code review or a discussion around a pull request can be tricky.

Consider this scenario: Sarah, a senior frontend engineer, has just reviewed John’s PR for a component that displays a list of products. She notices the component uses React Compiler extensively to memoize the rendering of individual product items. She leaves a comment on the PR description: “John, I’m seeing heavy use of the Forget algorithm here – particularly with the ProductItem component. While it’s great you’re addressing potential performance bottlenecks, could you explain why you’ve chosen to aggressively memoize this specific data? Are we sure the product IDs won’t change frequently enough to warrant a less aggressive approach? Perhaps documenting the rationale behind your choices would be helpful for future maintainers.”

This isn’t simply pointing out that he’s using “memoisation”; it’s about prompting him to articulate why this particular implementation is correct. The key here is framing it as an inquiry, not a criticism. Phrases like “could you explain…” and “are we sure…” soften the feedback and invite a deeper conversation. Also note how Sarah uses the technical term – “aggressively memoize” – which subtly implies she’s considering whether the approach might be too zealous, prompting John to justify his decision. Similarly, referencing “future maintainers” highlights the long-term implications of the code and encourages a more holistic view.

Another example: A Slack conversation between two engineers discussing a PR update: “Mark, I’m looking at this change and it seems like you’re heavily relying on React Compiler to avoid recalculating the totalPrice in the shopping cart component. It’s clever, but could we explore whether a more targeted memoization strategy – perhaps just for the initial calculation – might be sufficient? We want to avoid unnecessary overhead without sacrificing performance.” This phrasing focuses on suggesting an alternative approach rather than simply stating that the current method is “wrong.” It’s about collaborative problem-solving.

Here’s a simple example of how React Compiler might be used in this context, demonstrating the core concept:

react compiler --analyze shoppingCartComponent.jsx

This command (hypothetical, for illustration) would output an analysis showing the potential performance impact and suggesting optimization strategies based on the Forget algorithm’s principles – identifying data that is unlikely to change frequently and memoizing it accordingly. The report might highlight a specific line of code, like calculateTotalPrice(), and suggest: “Memoize the result of this function if the product quantities and prices are not expected to change during the component’s lifecycle.”