Build-Time Magic

Build-Time Magic
How the React Compiler Supercharges Your App
A quick deep dive for engineers tired of memoizing by hand

Transcript

1. Build-Time Magic How the React Compiler Supercharges Your App A quick deep dive for engineers tired of memoizing by hand
2. 👋 SAHIL KHOKHAR Tech Lead @ mercari React practitioner. Performance obsessive. PR reviewer who has seen way too many broken dependency arrays. 📍 Tokyo, Japan
3. THE PROBLEM Raise Your Hand If You've Written This const handleClick = useCallback(() => { doSomething(id); }, [id]); // deps
4. THE PROBLEM The Manual Memoization Tax Clean Component function ProductCard({ product }) { const price = format(product.price); return <div onClick={() => add(product)}>{price}</div>; } After "Optimization" 😬 const ProductCard = memo(({ product }) => { const price = useMemo(() => format(product.price), [product.price]); const add = useCallback(() => addToCart(product), [product]); return <div onClick={add}>{price}</div>; }); 1 Missing deps Stale bugs in prod 2 Over-memoization Overhead, not savings 3 Useless memo Parent creates new refs anyway
5. THE COMPILER What the React Compiler Actually Is Source Code The original React components and logic written by developers. React Compiler Analyzes and automatically optimizes the source code during build. Optimized JS The resulting high-performance, production-ready JavaScript code. Key facts • Formerly called React Forget • Runs at build time — zero additional runtime cost • Ships as a Babel/SWC plugin • Does fine-grained reactivity analysis — not blind wrapping
6. THE COMPILER The 4-Step Pipeline Parse Build an IR graph of all values & dependencies Analyze Reactivity Tag values as reactive (props/state) or static Group Blocks Bundle related computations into one memoization unit Emit Code Output readable React with cache checks baked in One memoization block — not three separate useMemo calls. That's more efficient than anything we write by hand.
7. SETUP Turning It On Is This Simple Next.js — one flag // next.config.js const nextConfig = { experimental: { reactCompiler: true, }, }; Gradual opt-in function ProductCard({ product }) { "use memo"; // only this file compiled } Gradual adoption path 01 Set compilationMode: 'annotation' 02 Add "use memo" to 3–5 heavy components 03 Measure, validate, expand
8. LIVE DEMO
9. LIVE DEMO Same Code. Zero Changes. Fewer Re-renders. 🔴 Before — compiler off 47 components re-rendered Per keystroke in search Every product card, the cart, the header — all re-render on every keystroke. 🟢 After — compiler on 5 components re-rendered Per keystroke in search Cards that don't depend on search state? Skipped. Automatically.
10. BENCHMARKING Trust Data, Not Vibes Three-tool stack React Profiler Component-level re-renders Chrome DevTools Runtime scripting time & long tasks Lighthouse / Web Vitals INP, TBT, LCP
11. LIMITS When the Compiler Can't Help 1 Mutation outside React state Push to arrays → stale renders. The compiler assumes Rules of React. 2 Architectural bottlenecks Can't virtualize, can't reduce component count, can't offload to a Web Worker. Those decisions are still yours. 3 Rule-breaking 3rd-party libs Mutating props, relying on referential inequality — test your critical paths. Fix first: Run eslint-plugin-react-compiler before enabling. It flags exactly what the compiler can't safely optimize.
12. ADOPTION Action Plan Install ESLint Plugin ▶ eslint-plugin-react-compiler Fix what it flags — they're probably bugs anyway. Annotation Mode Add "use memo" to 3–5 of your heaviest components. Benchmark Profile before & after. Put the numbers in your PR description. Expand Gradually Switch to full compilation. Keep ESLint in CI to protect the gains.
13. CLOSING Four Things to Take Home 1 Automatic, fine-grained memoization The compiler computes dependencies statically and consistently. 2 One flag in Next.js Adopt gradually with annotation mode. Measure as you go. 3 Benchmark with three tools React Profiler → Chrome DevTools → Lighthouse. In that order. 4 Rules of React still apply Fix violations first — you'll be better off either way. "The best optimization is the one you don't have to think about."
14. Thank You ! Find me after the talk for questions, or connect with me on social media!