React 19 Compiler: Setup & Optimizations Analysis

React 19 introduces the React Compiler which applies lots of significant low-level optimizations by inlining code. In this video we dive into an example components and analyze how do the optimizations work.
00:03 Vite App Scaffold
00:29 Upgrading to React 19
01:21 Compiler healthcheck ESlint and Babel plugin
03:12 Compiler outputs memoized components
03:47 Comparing output with and without the Compiler
04:18 creating the component to be analyzed
05:08 running standard babel JSX transpilation
06:55 analyzing compiler output
07:36 the internal component cache
08:56 initial and later rerenders
09:47 memoizing expressions
10:18 closer look at useMemoCache
12:18 memoizing template parts

[@mateusztwardy64]

Great job. Thanks!