Mark Erikson
Senior Engineer
Replay.io
[About]
Mark Erikson is a Senior Engineer at Replay, and lives in southwest Ohio, USA. Mark is a Redux maintainer, creator of Redux Toolkit, and general keeper of the Redux docs. He spends much of his time answering questions about React and Redux anywhere there's a comment box on the internet, and usually hangs out in the Reactiflux chat channels.
A Guide to React Compiler Rendering
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. The new React Compiler promises to "automatically optimize your React app"... but what is it actually doing to your component? How does that complex compiler-written code actually make your app faster? How does the Compiler change the long-standing fundamental model of React's rendering behavior?
In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at React's built-in techniques for optimizing rendering performance, including the little-known trick that the Compiler depends on. We'll demystify the Compiler's output and break down exactly what that code does. Finally, we'll see how the Compiler rewrites our mindset of using React itself, and what that means for learning and using React in the future.
You'll leave with an accurate mental model of React's behavior before and after the Compiler, and be ready to use React more effectively.