React Compiler — how does auto-memoization work in React 19?

Q: React Compiler — how does auto-memoization work in React 19?

**Target Audience:** Frontend engineers preparing for senior React interviews — assumes familiarity with useMemo and React.memo . **Difficulty:** Hard > **How to read this doc:** Concepts are explained in plain language first, then tagged with 📌 Interview term: . The runtime inspection below was produced by reading the installed React 19.2.8 in this repo. Release-date and version claims were checked against the React team announcement rather than recalled — see the citation in section 3. ## 1. Why This Even Matters — A Story First Imagine a kitchen where the chef re-chops every vegetable from scratch each time an order comes in, even when the order is identical to the last one. The old fix was for the chef to keep sticky notes everywhere: *this carrot is already chopped, reuse it*. That is useMemo and useCallback — effective, but you have to write and maintain every note yourself, and a forgotten or wrong note is worse

The problem

Question presented to candidate: "React Compiler reached 1.0. What does it actually do to your code at build time, and does it mean you can delete every useMemo, useCallback, and React.memo in the codebase?"

What a strong answer should cover:

It is a build-time tool (a Babel plugin), not a runtime feature — it rewrites your components during compilation.
It performs automatic memoization: it infers what each component reads and produces, and caches values so they are only recomputed when their inputs change.
The output leans on a runtime hook — exposed on React as __COMPILER_RUNTIME.c, conventionally useMemoCache — which allocates a fixed-size cache array per component instance.
It relies on the Rules of React: components must be pure and props/state must not be mutated. Code that breaks those rules is skipped, not miscompiled.
It is opt-in and incremental; you can adopt it directory by directory.
Manual memoization is not forbidden and existing useMemo calls keep working — but they become largely redundant in compiled files.
Version precision: React Compiler 1.0 shipped on 7 October 2025, and it supports React 17 through 19.

Clarifying questions expected:

"Is the codebase already Rules-of-React clean — does it pass the ESLint rules?"
"Which build tool are we on? The integration differs for Next.js, Vite, and plain Babel."

Code / implementation expected: Optional. Being able to describe the before-and-after shape of a compiled component is worth more than writing one out.

react-compiler
performance

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Frontend engineers preparing for senior React interviews — assumes familiarity with useMemo and React.memo. Difficulty: Hard

How to read this doc: Concepts are explained in plain language first, then tagged with 📌 Interview term:. The runtime inspection below was produced by reading the installed React 19.2.8 in this repo. Release-date and version claims were checked against the React team announcement rather than recalled — see the citation in section 3.

1. Why This Even Matters — A Story First

Imagine a kitchen where the chef re-chops every vegetable from scratch each time an order comes in, even when the order is identical to the last one. The old fix was for the chef to keep sticky notes everywhere: this carrot is already chopped, reuse it. That is useMemo and useCallback — effective, but you have to write and maintain every note yourself, and

The solution is hidden so you can try first

8 min read · 8 sections

Try it in the playground

Open any example in the playground to run and change it.

ReactBefore and after: hand-written memoization the compiler would make redundant

Open in playground

import { useState, useMemo, useCallback, memo } from "react";

const ITEMS = Array.from({ length: 8 }, (_, i) => ({ id: i, n: (i * 37) % 11 }));

// A memoised child so the identity of its props actually matters.
const List = memo(function List({ items, onPick }) {
  console.log("List rendered");
  return (
    <ul>
      {items.map((it) => (
        <li key={it.id}>
          <button onClick={() => onPick(it.id)}>item {it.id} (n={it.n})</button>
        </li>
      ))}
    </ul>
  );
});

// WITHOUT the compiler you must write the memoization yourself, and every
// dependency array is a chance to get it wrong.
function Manual({ items }) {
  const [picked, setPicked] = useState(null);
  const [tick, setTick] = useState(0);

  const sorted = useMemo(() => items.slice().sort((a, b) => a.n - b.n), [items]);
  const onPick = useCallback((id) => setPicked(id), []);

  return (
    <section>
      <h4>Hand-written useMemo / useCallback</h4>
      <button onClick={() => setTick((t) => t + 1)}>Re-render parent ({tick})</button>
      <p>picked: {String(picked)}</p>
      <List items={sorted} onPick={onPick} />
    </section>
  );
}

// WITH React Compiler enabled you would write exactly this, and the build step
// would insert the equivalent caching — conceptually:
//   const $ = useMemoCache(4);
//   if ($[0] !== items) { $[1] = items.slice().sort(...); $[0] = items; }
function Plain({ items }) {
  const [picked, setPicked] = useState(null);
  const [tick, setTick] = useState(0);

  const sorted = items.slice().sort((a, b) => a.n - b.n);
  const onPick = (id) => setPicked(id);

  return (
    <section>
      <h4>Plain — what you write with the compiler on</h4>
      <button onClick={() => setTick((t) => t + 1)}>Re-render parent ({tick})</button>
      <p>picked: {String(picked)}</p>
      <List items={sorted} onPick={onPick} />
    </section>
  );
}

export default function App() {
  return (
    <div style={{ padding: 24, fontFamily: "system-ui", lineHeight: 1.5 }}>
      <Manual items={ITEMS} />
      <hr />
      <Plain items={ITEMS} />
      <p style={{ color: "#666", fontSize: 13 }}>
        Open the console. This playground has no compiler configured, so the
        Plain version re-renders List on every parent tick while the hand-memoised
        one does not. With the compiler enabled, both behave like the first.
      </p>
    </div>
  );
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.