Lessons from adopting the React Compiler

React Nexus React Nexus
Bangalore

This year (2025), I got the chance to present a talk I was really looking forward to, where I shared my experience of using the React Compiler in a real-world project - Slant it at React Nexus 2025. This was my third time returning to the conference as a speaker, after delivering talks in 2023 and 2024!

React Nexus has been one of the consistent React conferences in India, bringing together a great mix of professional developers and students from different parts of the country. The agenda this year struck a nice balance between React, frontend engineering, and AI, while still staying rooted in React rather than going all in on AI-related topics which was nice to see.

About the talk

React Compiler is one of the newest and arguably the biggest changes in how React works under the hood since React Server Components. Yet, it’s also been one of the most “boring” changes, given how little it affects the way we actually write React code (which is a good thing!).

The goal of this talk was to share the learnings I gained while migrating my product, Slant it, to React 19 with the React Compiler enabled. There aren’t many case studies or articles that walk through a real migration journey, covering the pros and cons in real codebases and the actual impact on end users. Most talks tend to rely on contrived examples or toy projects, where everything looks far more straightforward than it usually is.

UI performance in React isn’t talked about very often, and it typically becomes a problem only as codebases grow and interfaces become more complex especially in highly interactive products like Slant it. While React has provided APIs like memo(), useMemo(), and useCallback() to optimize rendering through memoization, using them effectively has always required extra effort and careful thinking from developers. In large codebases, manual memoization not only makes the code harder to read, but also more brittle. Any new change requires you to double-check that you haven’t accidentally opted out of memoization. The React Compiler automates this entire process by performing smart static analysis of React code and memoizing parts of the logic and JSX trees automatically. In most cases, it works out of the box as long as you’re writing valid React code and following the Rules of React. There are some caveats and limitations that developers should be aware of, which I covered during the talk.

In Slant it, enabling the compiler led to a 44% reduction in INP in certain parts of the application, along with a noticeable reduction in unnecessary re-renders of unrelated components. I expect the gains to be even more significant in codebases that don’t already have extensive manual optimizations in place.

Post-conf thoughts

The audience resonated well with the talk, and I received some great feedback. I was especially surprised by how many people already knew me through Slant it and were curious about the new features I’m working on. There wasn’t a lot of deep discussion around the React Compiler itself (as I mentioned, it’s a “boring” change!), but I did have several interesting conversations around React Server Components and how AI is reshaping the software engineering landscape.

A massive thank you to Kiran and the entire team behind React Nexus for continuing to organize such an amazing conference year after year 🚀