React Compiler - The Missing Piece for Optimizing React Applications

This conference talk by Tapas Adhikary explores the React Compiler as a powerful optimization tool for React applications. Discover the architecture, implementation rules, and integration with React 19. Learn how to optimize existing applications by incorporating the React Compiler, and dive deep into its compilation phases using the playground. The presentation covers essential topics including the working principles of the compiler, Babel and ESLint plugins, component rendering optimization, in-place updates, JSX caching, and compatibility considerations. Follow along with detailed examples of product page hierarchy optimization and practical configuration steps to enhance your React application performance.

Syllabus

00:00 Introduction to React Compiler
01:45 Optimizations and Introduction to React Compiler
04:17 Introduction to React 19 and React Compiler
05:30 Working Principle of Compiler and React Compiler
08:24 React Compiler: Babel and ESLint Plugins
11:36 Product Page Hierarchy and Component Rendering
14:27 Optimizing Components with React Compiler
17:26 Configuring Babel and ESLint for React Compiler
19:44 React Compiler: Babel Plugin and In-Place Updates
22:31 React Compiler Playground and Code Analysis
24:44 Caching JSX and Configuring React Compiler
27:41 React Compiler Compatibility and Conclusion