Vitor Alencar 

Agenda React Re-render Manual Memoization React Compiler Rules of react How to adopt 

What When Where @vitormalencar 

What When Where @vitormalencar 

What When Where @vitormalencar 

What When Where @vitormalencar React Compiler Automating Performance Optimization 

< > < > < = > < = = > < > < = >{{ product.name }} - {{ product.price | currency }} < > app angular. ( , []); app. ( , ( ) { $scope.products [ { name: , price: }, { name: , price: }, { name: , price: } ]; }); DOCTYPE html head script script head body ul li li ul script script body html html src ng-app ng-controller ng-repeat module controller "https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js" "productApp" "ProductController" "product in products" 'productApp' 'ProductController' 'Product 1' 'Product 2' 'Product 3' var = function = $scope 10.00 20.00 30.00 

class extends constructor = = => const = + const = * => ... return => = = { ( ) { (props); .state { products: [ { name: , price: }, { name: , price: }, { name: , price: } ] }; } () { .state.products. ; { name: newProductNumber , price: newProductNumber }; . (( ) ({ products: [ prevState.products, newProduct] })); }; () { ( < > < > { .state.products. (( , ) ( < {index}> {product.name} - ${product.price. ( )} ))} < { .addProduct}>Add Products ); } } ProductList Component addProduct setState render map key toFixed onClick props prevState product index super this 10.00 20.00 30.00 newProductNumber this length 1 newProduct 10.00 this this 2 this 'Product 1' 'Product 2' 'Product 3' `Product ${ }` div ul li li ul button button div 

class extends constructor = = => const = + const = * => ... return { ( ) { (props); .state { products: [ { name: , price: }, { name: , price: }, { name: , price: } ] }; } () { .state.products. ; { name: newProductNumber , price: newProductNumber }; . (( ) ({ products: [ prevState.products, newProduct] })); }; () { ( < > < > ProductList Component addProduct setState render props prevState super this 10.00 20.00 30.00 newProductNumber this length 1 newProduct 10.00 this 'Product 1' 'Product 2' 'Product 3' `Product ${ }` div ul 

= => const = + const = * => ... return => = = () { .state.products. ; { name: newProductNumber , price: newProductNumber }; . (( ) ({ products: [ prevState.products, newProduct] })); }; () { ( < > < > { .state.products. (( , ) ( < {index}> {product.name} - ${product.price. ( )} ))} < { .addProduct}>Add Products ); } } addProduct setState render map key toFixed onClick prevState product index newProductNumber this length 1 newProduct 10.00 this this 2 this `Product ${ }` div ul li li ul button button div 

const = => const = const = => const = + const = * ... return => = = () { [ , ] ([ { name: , price: }, { name: , price: }, { name: , price: }, ]); () { products. ; { name: newProductNumber , price: newProductNumber , }; ([ products, newProduct]); }; ( < > < > {products. (( , ) ( < {index}> {product.name} - ${product.price. ( )} ))} < {addProduct}>Add Product ); }; ProductList useState addProduct setProducts map key toFixed onClick products setProducts 10.0 20.0 30.0 newProductNumber length 1 newProduct 10.0 2 "Product 1" "Product 2" "Product 3" `Product ${ }` div ul li li ul button button div product index 

const = => const = const = => const = + const = * ... return () { [ , ] ([ { name: , price: }, { name: , price: }, { name: , price: }, ]); () { products. ; { name: newProductNumber , price: newProductNumber , }; ([ products, newProduct]); }; ( ProductList useState addProduct setProducts products setProducts 10.0 20.0 30.0 newProductNumber length 1 newProduct 10.0 "Product 1" "Product 2" "Product 3" `Product ${ }` 

Creating amazing experiences 

Creating amazing experiences 

Until you open devtools 

Understanding React Re-rendering Mechanism 

No content

PARENT 

PARENT 

PARENT 

Reactive UI React can sometimes be overly reactive. 

Current options Manual Memoization 

export default function const = const = => => const = => === if return => === ? ... + : return ... const = => => + const = => => + * return = = = = () { [ , ] ([]); ( ) { (( ) { currentCart. ( ( ) cartItem.item.id item.id ); (existingItem) { currentCart. (( ) cartItem.item.id item.id { cartItem, quantity: cartItem.quantity } cartItem ); } [ currentCart, { item, quantity: }]; }); }; () cart. (( , ) total item.quantity, ); () cart. (( , ) total item.item.price item.quantity, ); ( < > < {products} {addToCart} /> < { ()} { ()} /> ) } MobileEcommerce useState addToCart setCart find map getTotalItems reduce getTotalPrice reduce products addToCart totalItems getTotalItems totalPrice getTotalPrice cart setCart existingItem 1 1 0 0 ProductList CartSummary itemm currentCart cartItem cartItem total item total item div div 

export default function const = const = => => const = => === if return => === ? ... + : return ... const = => => + const = => => + * return = = = = () { [ , ] ([]); ( ) { (( ) { currentCart. ( ( ) cartItem.item.id item.id ); (existingItem) { currentCart. (( ) cartItem.item.id item.id { cartItem, quantity: cartItem.quantity } cartItem ); } [ currentCart, { item, quantity: }]; }); }; () cart. (( , ) total item.quantity, ); () cart. (( , ) total item.item.price item.quantity, ); ( < > < {products} {addToCart} /> < { ()} { ()} /> MobileEcommerce useState addToCart setCart find map getTotalItems reduce getTotalPrice reduce products addToCart totalItems getTotalItems totalPrice getTotalPrice cart setCart existingItem 1 1 0 0 ProductList CartSummary item currentCart cartItem cartItem total item total item div div 

export default function const = const = => => const = => === if return => === ? ... + : return ... const = => => + const = => => + * return = = = = () { [ , ] ([]); ( ) { (( ) { currentCart. ( ( ) cartItem.item.id item.id ); (existingItem) { currentCart. (( ) cartItem.item.id item.id { cartItem, quantity: cartItem.quantity } cartItem ); } [ currentCart, { item, quantity: }]; }); }; () cart. (( , ) total item.quantity, ); () cart. (( , ) total item.item.price item.quantity, ); ( < > < {products} {addToCart} /> < { ()} { ()} /> MobileEcommerce useState addToCart setCart find map getTotalItems reduce getTotalPrice reduce products addToCart totalItems getTotalItems totalPrice getTotalPrice cart setCart existingItem 1 1 0 0 ProductList CartSummary item currentCart cartItem cartItem total item total item div div 

USECALLBACK export default function const = const = => => const = => === if return => === ? ... + : return ... const = => => + const = => => + * return = = = = () { [ , ] ([]); ( ) { (( ) { currentCart. ( ( ) cartItem.item.id item.id ); (existingItem) { currentCart. (( ) cartItem.item.id item.id { cartItem, quantity: cartItem.quantity } cartItem ); } [ currentCart, { item, quantity: }]; }); }; () cart. (( , ) total item.quantity, ); () cart. (( , ) total item.item.price item.quantity, ); ( < > < {products} {addToCart} /> < { ()} { ()} /> MobileEcommerce useState addToCart setCart find map getTotalItems reduce getTotalPrice reduce products addToCart totalItems getTotalItems totalPrice getTotalPrice cart setCart existingItem 1 1 0 0 ProductList CartSummary item currentCart cartItem cartItem total item total item div div 

export default function const = const = => => const = => === if return => === ? ... + : return ... const = => => + const = => => + * return = = = = () { [ , ] ([]); ( ) { (( ) { currentCart. ( ( ) cartItem.item.id item.id ); (existingItem) { currentCart. (( ) cartItem.item.id item.id { cartItem, quantity: cartItem.quantity } cartItem ); } [ currentCart, { item, quantity: }]; }); }; () cart. (( , ) total item.quantity, ); () cart. (( , ) total item.item.price item.quantity, ); ( < > < {products} {addToCart} /> < { ()} { ()} /> MobileEcommerce useState addToCart setCart find map getTotalItems reduce getTotalPrice reduce products addToCart totalItems getTotalItems totalPrice getTotalPrice cart setCart existingItem 1 1 0 0 ProductList CartSummary item currentCart cartItem cartItem total item total item div div 

USEMEMO export default function const = const = => => const = => === if return => === ? ... + : return ... const = => => + const = => => + * return = = = = () { [ , ] ([]); ( ) { (( ) { currentCart. ( ( ) cartItem.item.id item.id ); (existingItem) { currentCart. (( ) cartItem.item.id item.id { cartItem, quantity: cartItem.quantity } cartItem ); } [ currentCart, { item, quantity: }]; }); }; () cart. (( , ) total item.quantity, ); () cart. (( , ) total item.item.price item.quantity, ); ( < > < {products} {addToCart} /> < { ()} { ()} /> MobileEcommerce useState addToCart setCart find map getTotalItems reduce getTotalPrice reduce products addToCart totalItems getTotalItems totalPrice getTotalPrice cart setCart existingItem 1 1 0 0 ProductList CartSummary item currentCart cartItem cartItem total item total item div div 

return ... const = => => + const = => => + * return = = = = ); } [ currentCart, { item, quantity: }]; }); }; () cart. (( , ) total item.quantity, ); () cart. (( , ) total item.item.price item.quantity, ); ( < > < {products} {addToCart} /> < { ()} { ()} /> ) } getTotalItems reduce getTotalPrice reduce products addToCart totalItems getTotalItems totalPrice getTotalPrice 1 0 0 ProductList CartSummary total item total item div div 

REACT.MEMO return ... const = => => + const = => => + * return = = = = ); } [ currentCart, { item, quantity: }]; }); }; () cart. (( , ) total item.quantity, ); () cart. (( , ) total item.item.price item.quantity, ); ( < > < {products} {addToCart} /> < { ()} { ()} /> ) } getTotalItems reduce getTotalPrice reduce products addToCart totalItems getTotalItems totalPrice getTotalPrice 1 0 0 ProductList CartSummary total item total item div div 

export default function const = const = => => const = => === if return => === ? ... + : return ... const = => return => + const = => return => + * return = = = = () { [ , ] ([]); (( ) { (( ) { currentCart. ( ( ) cartItem.item.id item.id ); (existingItem) { currentCart. (( ) cartItem.item.id item.id { cartItem, quantity: cartItem.quantity } cartItem ); } [ currentCart, { item, quantity: }]; }); }, []); (() { cart. (( , ) total cartItem.quantity, ); }, [cart]); (() { cart. ( ( , ) total cartItem.item.price cartItem.quantity, ); }, [cart]); ( < > < {products} {addToCart} /> < {totalItems} {totalPrice} /> ); } MobileEcommerceOptimized useState useCallback setCart find map useMemo reduce useMemo reduce products addToCart totalItems totalPrice cart setCart addToCart existingItem 1 1 totalItems 0 totalPrice 0 ProductList CartSummary item currentCart cartItem cartItem total cartItem total cartItem // Memoized computed values div div 

export default function const = const = => => const = => === if return => === ? ... + : return ... const = => return => + const = => () { [ , ] ([]); (( ) { (( ) { currentCart. ( ( ) cartItem.item.id item.id ); (existingItem) { currentCart. (( ) cartItem.item.id item.id { cartItem, quantity: cartItem.quantity } cartItem ); } [ currentCart, { item, quantity: }]; }); }, []); (() { cart. (( , ) total cartItem.quantity, ); }, [cart]); (() { MobileEcommerceOptimized useState useCallback setCart find map useMemo reduce useMemo cart setCart addToCart existingItem 1 1 totalItems 0 totalPrice item currentCart cartItem cartItem total cartItem // Memoized computed values 

return ... const = => return => + const = => return => + * return = = = = ); } [ currentCart, { item, quantity: }]; }); }, []); (() { cart. (( , ) total cartItem.quantity, ); }, [cart]); (() { cart. ( ( , ) total cartItem.item.price cartItem.quantity, ); }, [cart]); ( < > < {products} {addToCart} /> < {totalItems} {totalPrice} /> ); } useMemo reduce useMemo reduce products addToCart totalItems totalPrice 1 totalItems 0 totalPrice 0 ProductList CartSummary total cartItem total cartItem // Memoized computed values div div 

export default function const = const = => => const = => === if return => === ? ... + : return ... const = => return => + const = => return => + * return = = = = () { [ , ] ([]); (( ) { (( ) { currentCart. ( ( ) cartItem.item.id item.id ); (existingItem) { currentCart. (( ) cartItem.item.id item.id { cartItem, quantity: cartItem.quantity } cartItem ); } [ currentCart, { item, quantity: }]; }); }, []); (() { cart. (( , ) total cartItem.quantity, ); }, [cart]); (() { cart. ( ( , ) total cartItem.item.price cartItem.quantity, ); }, [cart]); ( < > < {products} {addToCart} /> < {totalItems} {totalPrice} /> ); } MobileEcommerceOptimized useState useCallback setCart find map useMemo reduce useMemo reduce products addToCart totalItems totalPrice cart setCart addToCart existingItem 1 1 totalItems 0 totalPrice 0 ProductList CartSummary item currentCart cartItem cartItem total cartItem total cartItem // Memoized computed values div div 

export default function const = const = => => const = => === if return => === ? ... + : return ... const = => return => + const = => return => + * return = = = = () { [ , ] ([]); (( ) { (( ) { currentCart. ( ( ) cartItem.item.id item.id ); (existingItem) { currentCart. (( ) cartItem.item.id item.id { cartItem, quantity: cartItem.quantity } cartItem ); } [ currentCart, { item, quantity: }]; }); }, []); (() { cart. (( , ) total cartItem.quantity, ); }, [cart]); (() { cart. ( ( , ) total cartItem.item.price cartItem.quantity, ); }, [cart]); ( < > < {products} {addToCart} /> < {totalItems} {totalPrice} /> ); } MobileEcommerceOptimized useState useCallback setCart find map useMemo reduce useMemo reduce products addToCart totalItems totalPrice cart setCart addToCart existingItem 1 1 totalItems 0 totalPrice 0 ProductList CartSummary item currentCart cartItem cartItem total cartItem total cartItem // Memoized computed values div div 

export default function const = const = => => const = => === if return => === ? ... + : return ... const = => return => + const = => () { [ , ] ([]); (( ) { (( ) { currentCart. ( ( ) cartItem.item.id item.id ); (existingItem) { currentCart. (( ) cartItem.item.id item.id { cartItem, quantity: cartItem.quantity } cartItem ); } [ currentCart, { item, quantity: }]; }); }, []); (() { cart. (( , ) total cartItem.quantity, ); }, [cart]); (() { MobileEcommerceOptimized useState useCallback setCart find map useMemo reduce useMemo cart setCart addToCart existingItem 1 1 totalItems 0 totalPrice item currentCart cartItem cartItem total cartItem // Memoized computed values 

? ... + : return ... const = => return => + const = => return => + * return = = = = { cartItem, quantity: cartItem.quantity } cartItem ); } [ currentCart, { item, quantity: }]; }); }, []); (() { cart. (( , ) total cartItem.quantity, ); }, [cart]); (() { cart. ( ( , ) total cartItem.item.price cartItem.quantity, ); }, [cart]); ( < > < {products} {addToCart} /> < {totalItems} {totalPrice} /> ); } useMemo reduce useMemo reduce products addToCart totalItems totalPrice 1 1 totalItems 0 totalPrice 0 ProductList CartSummary total cartItem total cartItem // Memoized computed values div div 

State references Reference identity Easy to break export default function const = const = => => const = => === if return => === ? ... + : return ... const = => return => + const = => return => + * return = = = = () { [ , ] ([]); (( ) { (( ) { currentCart. ( ( ) cartItem.item.id item.id ); (existingItem) { currentCart. (( ) cartItem.item.id item.id { cartItem, quantity: cartItem.quantity } cartItem ); } [ currentCart, { item, quantity: }]; }); }, []); (() { cart. (( , ) total cartItem.quantity, ); }, [cart]); (() { cart. ( ( , ) total cartItem.item.price cartItem.quantity, ); }, [cart]); ( < > < {products} {addToCart} /> < {totalItems} {totalPrice} /> ); } MobileEcommerceOptimized useState useCallback setCart find map useMemo reduce useMemo reduce products addToCart totalItems totalPrice cart setCart addToCart existingItem 1 1 totalItems 0 totalPrice 0 ProductList CartSummary item currentCart cartItem cartItem total cartItem total cartItem // Memoized computed values div div 

export default function const = const = => => const = => === if return => === ? ... + : return ... const = => return => + const = => return => + * return = = = = () { [ , ] ([]); (( ) { (( ) { currentCart. ( ( ) cartItem.item.id item.id ); (existingItem) { currentCart. (( ) cartItem.item.id item.id { cartItem, quantity: cartItem.quantity } cartItem ); } [ currentCart, { item, quantity: }]; }); }, []); (() { cart. (( , ) total cartItem.quantity, ); }, [cart]); (() { cart. ( ( , ) total cartItem.item.price cartItem.quantity, ); }, [cart]); ( < > < {products} {addToCart} /> < {totalItems} {totalPrice} /> ); } MobileEcommerceOptimized useState useCallback setCart find map useMemo reduce useMemo reduce products addToCart totalItems totalPrice cart setCart addToCart existingItem 1 1 totalItems 0 totalPrice 0 ProductList CartSummary item currentCart cartItem cartItem total cartItem total cartItem // Memoized computed values div div 

Just Imagine Spending hours optimizing your React app, meticulously placing and , only to discover that you missed a `useMemo` `useCallback` component 

Just Imagine Or worse, someone else on your team does it without even realizing. 

Automating Optimization Enter the Compiler 

No content

AST build ir code optimized code Codegen 

AST build ir code optimized code Codegen 

AST build ir code optimized code Codegen 46 Steps 

eslint Compiler core babel plugin 

AST Exploration Decides which functions to compile in a file using plugin options and local directives. The plugin invokes the compiler for each component or hook, replacing the original function with a new AST node. 

AST Exploration Decides which functions to compile in a file using plugin options and local directives. The plugin invokes the compiler for each component or hook, replacing the original function with a new AST node. 

Lowering (BuildHIR) The compiler first converts the Babel AST into React Compiler's HIR (High-level Intermediate Representation). Each block consists of instructions and a terminal, facilitating block iteration with consideration for predecessors and successors, especially in loops. 

Lowering (BuildHIR) The compiler first converts the Babel AST into React Compiler's HIR (High-level Intermediate Representation). Each block consists of instructions and a terminal, facilitating block iteration with consideration for predecessors and successors, especially in loops. 

Lowering (BuildHIR) The compiler first converts the Babel AST into React Compiler's HIR (High-level Intermediate Representation). Each block consists of instructions and a terminal, facilitating block iteration with consideration for predecessors and successors, especially in loops. 

Optimizing Various passes such as dead code elimination and constant propagation can generally improve performance and reduce the amount of instructions to be optimized later. 

optimizing Various passes such as dead code elimination and constant propagation can generally improve performance and reduce the amount of instructions to be optimized later. 

Codegen The compiler optimisations process generates the final optimised version of your code 

Codegen Various passes such as dead code elimination and constant propagation can generally improve performance and reduce the amount of instructions to be optimized later. 

Codegen Various passes such as dead code elimination and constant propagation can generally improve performance and reduce the amount of instructions to be optimized later. 

Static Values let if === = = else = const = initialCart; (memoCache[ ] Symbol. ( )) { initialCart []; memoCache[ ] initialCart; } { initialCart memoCache[ ]; } [ , ] (initialCart); 0 0 0 cart setCart for useState "react.memo_cache_sentinel" The compiler memoizes the initial state [] to avoid recreating the empty array on every render 

Functions helps in preventing unnecessary re-renders of child components that receive addToCart as a prop. let if === const = => = = else = memoizedAddToCart; (memoCache[ ] Symbol. ( )) { ( ) { }; memoizedAddToCart addToCart; memoCache[ ] memoizedAddToCart; } { memoizedAddToCart memoCache[ ]; } 1 1 1 for addToCart "react.memo_cache_sentinel" item // Function body... 

On subsequent renders, if the dependencies haven't changed, the memoized output is returned directly. JSX Output let if === = = = = = = else = return memoizedOutput; (memoCache[ ] Symbol. ( )) { ( < > < {products} {memoizedAddToCart} /> < { ()} { ()} /> ); memoCache[ ] memoizedOutput; } { memoizedOutput memoCache[ ]; } memoizedOutput; 2 ProductList CartSummary 2 2 for memoizedOutput products addToCart totalItems getTotalItems totalPrice getTotalPrice "react.memo_cache_sentinel" div div 

Summary Static Values Initial state values like empty arrays or objects are memoized to prevent re-creation. Functions Functions defined inside the component (e.g., addToCart) are memoized to maintain referential equality across renders. Memoization of JSX Output The entire render output is memoized when safe to do so. Compiler Optimizations @Vitormalencar 

what we can do We've achieved beyond feature parity, improved memoization, and enhanced performance while maintaining developer experience. 

what we can do We've achieved beyond feature parity, improved memoization, and enhanced performance while maintaining developer experience. 

what we can do We've achieved beyond feature parity, improved memoization, and enhanced performance while maintaining developer experience. 

Here is where the gold is For my friends 

Your Workflow Adopting Compiler 

No content

Install Make work Make Right Make better 

Install 

Install 

Install 

For the compilation to work, it assumes that you are following the rules of React. Not magic 

Rules Of React Components and Hooks must be pure React calls Components and Hooks The Rules of Hooks Compiler Optimizations @Vitormalencar 

After enabling the compiler, continue debugging the app for optimal performance. You may be surprised... Do manual checks 

Skiping compilation export default function const = => const = return => = ({ }) { [ , ] (names); (() { (names); }, [names]); newNames. (); ( < > {sortedNames. (( ) ( < {name}>{name} ))} ); } SortedList useState useMemo setNewNames toSorted map key names name newNames setNewNames sortedNames ul li li ul 

Skiping compilation export default function const = => const = return => = ({ }) { [ , ] (names); (() { (names); }, [names]); newNames. (); ( < > {sortedNames. (( ) ( < {name}>{name} ))} ); } SortedList useState useMemo setNewNames toSorted map key names name newNames setNewNames sortedNames ul li li ul 

Skiping compilation export default function const = => const = return => = ({ }) { ; [ , ] (names); (() { (names); }, [names]); newNames. (); ( < > {sortedNames. (( ) ( < {name}>{name} ))} ); } SortedList useState useMemo setNewNames toSorted map key names name "use no memo" newNames setNewNames sortedNames ul li li ul 

Skiping compilation export default function const = => const = return => = ({ }) { ; [ , ] (names); (() { (names); }, [names]); newNames. (); ( < > {sortedNames. (( ) ( < {name}>{name} ))} ); } SortedList useState useMemo setNewNames toSorted map key names name "use no memo" newNames setNewNames sortedNames ul li li ul //JIRA-ticket-124 fix this component 

Devtools Helper 

Always check Make benchmarks and tests to compare before and after. 

Skiping compilation export default function const = => const = return => = ({ }) { [ , ] (names); (() { (names); }, [names]); newNames. (); ( < > {sortedNames. (( ) ( < {name}>{name} ))} ); } SortedList useState useMemo setNewNames toSorted map key names name newNames setNewNames sortedNames ul li li ul 

And again Is not magic.... 

Skiping compilation export default function const = => const = return => = ({ }) { [ , ] (names); (() { (names); }, [names]); newNames. (); ( < > {sortedNames. (( ) ( < {name}>{name} ))} ); } SortedList useState useMemo setNewNames toSorted map key names name newNames setNewNames sortedNames ul li li ul 

Let's get it clear The React Compiler isn’t part of React 19 

Let's get it clear The React Compiler isn’t part of React 19 

Final Considerations 

What is next Utilize new tools to enhance current projects. 

What is next Certain libraries, such as MobX, may not be compatible with the new compiler. 

What is next Just the beginning, envision expanding its capabilities beyond memoization. 

What is next Or Maybe even removing dependency arrays altogether.... maybe 

And Much more... There are several complex topics that we won't be able to delve into today, such as: 
 - Various use cases of memos
 - UseEffect stabilization
 - Automatic code deletion I'll cover them on my YouTube channel soon, so be sure to follow me on all my socials! 

What When Where @vitormalencar React Compiler Automating Performance Optimization 

What When Where @vitormalencar 

What When Where @vitormalencar 

What When Where @vitormalencar