How React Compiler Performs on Real Code
summary
React Compiler is run on a fresh TypeScript app of 15,000 lines and measured with Lighthouse (five-run averages). Initial load shows minimal regressions, while interaction times improve dramatically on some pages but only modestly on others. Rerender causes include new-array references returned by React Query and incompatible external libs like fuse, so manual memo or refactoring (spreading objects into primitive props) still fixes cases the compiler misses. Turning the compiler on is low-cost and often “good enough,” but it does not eliminate all manual optimization.
AI-written summary · about
chapters (14)
- 0:00Introduction
- 2:15Why React Compiler was created
- 3:40How memoization works in React
- 5:24Promise and limitations
- 7:34Key questions
- 7:55Testing on synthetic examples
- 11:27Evaluating on real app
- 12:51Initial load performance impact
- 13:56Interaction performance impact
- 15:23Debugging unexpected renders
- 18:14Investigating React Query data fetching
- 20:46Final verdict
- 21:06Can compiler catch all unnecessary renders
- 22:54Summary
related talks
32mHow React Compiler Performs on Real Code
19mLessons from adopting React Compiler
20mOptimizing React Applications with the New React 19 Compiler
19mReact Complier - deep dive into performance
06mReact Compiler deep dive
20mExperiments with React Compiler in Production Code
08mReact Without DevTools
30mReact Compiler