The compiler's trick, written by hand
Product renders every time App does, but Price is skipped when the amount is the same: Product hands React the same element object, and React skips an element it has already rendered. No memo anywhere. Writing to the cache during render is only safe for a compiler that controls all the code; don't do it in your own components.
The React Compiler is a build-time Babel plugin that rewrites your components and hooks to cache values, functions and JSX automatically, giving you the benefit of memo, useMemo and useCallback without writing them; it relies on your code following the Rules of React, and you can opt a function out with "use no memo".
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write the Vite config that enables the React Compiler.
This component is skipped by the compiler. Fix it so it can be compiled: function Total({ cart }) { cart.total = cart.items.reduce((s, i) => s + i.price, 0); return <p>{cart.total}</p>; }
Explain it without notes
What does the React Compiler do, and when does it run?
Why does the compiler need your code to follow the Rules of React?
What does "use no memo" do and when should you use it?
Why are the compiler-powered lint rules useful even without the compiler?
Preview
Console
Nothing logged yet.Expected console output
Product rendered
Price rendered 499
--- like (amount unchanged)
Product rendered
--- sale (amount changes)
Product rendered
Price rendered 399