Experiments with React Compiler in Production Code
summary
Integrated the React Compiler as a Babel plugin and a runtime module into a 25-package monorepo with NX and pnpm, then ran the hcheck that reports 82% compatible of ~3500 components (about 600 non-memoized components). Patched hcheck to list reasons and found four main blockers: computed/member expressions, tagged templates, many eslint-disable exhaustive-deps hooks, and custom hook patterns. Profiling shows up to 80% skip on forms in the render tree, but real-user INP and Sentry metrics show no clear user-visible gains; auto-memoization works but some optimizations still need manual fixes.
AI-written summary · about
chapters (9)
- 0:00Introduction to React compiler
- 0:56Compiler integration
- 2:39Challenges and limitations
- 4:19Debugging compatibility issues
- 6:19Fixing and refactoring code
- 7:46Measuring performance gains
- 9:19User experience metrics
- 10:46Memoization code experiments
- 18:57Conclusion and future outlook
related talks
20mIn case you missed the memo
19mLessons from adopting React Compiler
32mHow React Compiler Performs on Real Code
20mOptimizing React Applications with the New React 19 Compiler
03mReact Compiler is Open Source
30mReact Compiler
19mReact Complier - deep dive into performance
26mHow React Compiler Performs on Real Code