You already sprinkle memoization hooks like seasoning. A component gets twitchy, you wrap the expensive call; a child re-renders too often, you wrap the child. You know the pattern so well you don't think about it. The React Compiler is the team's promise to do that work for you — automatically, at build time, with no hook wrappers in the output.

Over the next seven screens you'll build its decision process piece by piece. Each screen hands you a wall the compiler had to climb and a tool it didn't have yet. Whatever you invent to get past the wall turns out to be a piece of the real compiler — you'll see the canonical names at the end.

Start with a tiny Nav — two props, a Date.now() stamp, one JSX subtree. Today every render re-runs the whole function and rebuilds every object. The compiler's first job: emit a different function. Plain JavaScript, no hooks in the output. Let's see what lands on the page.