Lessons from adopting React Compiler
summary
Adopting React compiler on a UI‑heavy web editor yields concrete wins and concrete limits: the codebase sees 218 of 237 components (92%) automatically memoized, interaction latency drops from 44ms → 24ms (44% reduction) for timeline scrubs, and bundle size and FCP/LCP stay near unchanged. Caveats include lost reactivity for computed fields (fixed by switching to vault io proxy state), skipped optimizations when dependency arrays are wrong, and no effect on third‑party libs unless they compile with the compiler; use the ESLint plugin first.
AI-written summary · about
chapters (14)
- 0:00Introduction and background
- 1:24React performance challenges
- 3:31React Compiler overview
- 5:56How React Compiler works
- 7:19Getting started with React Compiler
- 8:44Early optimizations observed
- 9:25Caveats of React Compiler
- 11:33Manual memoization issues
- 13:19Finding compilation issues
- 13:39External libraries and optimization
- 14:22Compiler optimization limitations
- 16:05Measuring performance impact
- 17:30Real-world performance gains
- 18:35Final thoughts and conclusion
related talks
20mIn case you missed the memo
20mExperiments with React Compiler in Production Code
32mHow React Compiler Performs on Real Code
19mReact Complier - deep dive into performance
20mOptimizing React Applications with the New React 19 Compiler
26mHow React Compiler Performs on Real Code
30mReact Compiler
28mMastering React Component Library Optimization