How React Compiler Performs on Real Code
summary
Runs the React Compiler (a Babel plugin) on a fresh 15k‑line TypeScript app, measures with Lighthouse (mobile, 5 runs averaged), and compares behaviors. Initial load shows no negative impact on initial load; synthetic examples (including tricky children-as-prop cases) stop rerenders. On real pages the compiler eliminates between 50–90% of unnecessary rerenders depending on code complexity — of nine notable cases, two fully fixed, two unchanged, rest partial. External libraries that aren’t precompiled (e.g. a Fuse search line) cause bailouts, so some manual memoization remains necessary for worst‑case performance.
AI-written summary · about
chapters (10)
- 0:00Introduction and background
- 2:09Problem with renders and memorization
- 6:47What React Compiler is
- 8:55Compiler on synthetic examples
- 15:18Testing on real code
- 16:42Impact on initial load
- 18:08Impact on interaction performance
- 27:04Can compiler catch all rerenders?
- 29:57Final verdict and recap
- 31:03Q&A
related talks
26mHow React Compiler Performs on Real Code
19mReact Complier - deep dive into performance
20mExperiments with React Compiler in Production Code
19mLessons from adopting React Compiler
20mOptimizing React Applications with the New React 19 Compiler
06mReact Compiler deep dive
19mWhat's next for the React Compiler?
08mReact Without DevTools