Javascript

Optimizing React Components with the React Compiler in V18

1 min read
This article was written over 18 months ago and may contain information that is out of date. Some content may still be relevant, but please refer to official documentation for the latest information.

Jesse Tomchak shows viewers how to use the new React compiler to automate memoization and useCallback to optimize React components. He demonstrates the manual process of optimizing React code and then shows how the React compiler simplifies this by automatically managing these optimizations. He also demonstrates setting up and configuring the compiler in React v18 using a Babel plugin, and explores the generated output to explain how the compiler enhances performance.

Chapters Introduction and Overview - 00:00 Introduction to the React Compiler - 02:27 Manual Optimization with useMemo and useCallback - 09:27 Setting Up the React Compiler - 26:00 Analyzing Compiler Output - 44:50 Exploring the Playground and Generated Code - 50:47 Handling Skipped Components and Memoization - 58:18 Discussion on React's Future and Best Practices - 01:03:28 Q&A and Audience Interaction - 01:10:53 Conclusion and Final Thoughts - 01:15:38

Follow Jesse Tomchak on Social Media Twitter: https://x.com/jtomchak Linkedin: https://www.linkedin.com/in/jtomchak/ Mastodon: https://moth.social/@jtomchak Github: https://github.com/jtomchak