React Complier - deep dive into performance
summary
React Compiler rewrites components to do internal memoization so you can throw away useMemo/useCallback for most cases, and it moves event handlers outside renders to create static references. Measured on a 4.5k‑LOC YouTube clone TBT rises (≈300ms vs 230ms), on a 3k‑LOC Trello‑like app INP and interactions improve roughly up to 2x faster interactions, larger codebases show INP/TBT reductions, Next.js, Webpack and Vite all work, bundle size varies, build time is ±10% build-time change, and it’s not compatible with class components or MobX; install separately for React 19 (works with 18).
AI-written summary · about
chapters (11)
- 0:00React Compiler intro
- 1:30Why React Compiler needed
- 3:18How code transforms
- 5:27Removes manual memo
- 6:32Measuring performance
- 7:56YouTube clone case study
- 9:41To-do app case study
- 10:45Large-scale project case
- 12:13Next.js adopts React Compiler
- 13:37Key takeaways & limits
- 15:22Q&A
related talks
20mOptimizing React Applications with the New React 19 Compiler
32mHow React Compiler Performs on Real Code
19mLessons from adopting React Compiler
05mReact Complier
30mReact Compiler
26mHow React Compiler Performs on Real Code
07mReact Compiler @ Meta
20mPerformance Anxiety with React: Track and increase speed of your apps