Why the rules matter: impure code goes stale when memoised
The plain component happens to show the new currency because its parent re-rendered. The memoised one keeps its cached output: its props didn't change. The fix is to put currency in state or context, so React (and the compiler) can see it change.
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
Plain: $250
Memoised: ₹250