Optimizing React Applications: Deep Dive into the React Compiler - Jnation PT

React 18 introduces the React Compiler, a powerful tool for optimizing component rendering and enhancing performance. In this talk, we'll explore how the compiler works, demonstrate practical performance improvements, and show you how to integrate these optimizations into your projects.

Whether you're working on new or existing applications, you'll leave with actionable insights to harness the full potential of React 18.

Transcript

1. Vitor Alencar
2. Agenda React Re-render Manual Memoization React Compiler Rules of react How to adopt
3. What When Where @vitormalencar
4. What When Where @vitormalencar
5. What When Where @vitormalencar
6. What When Where @vitormalencar React Compiler Automating Performance Optimization
7. <! > < > < > < = ></ > </ > < = = > < > < = >{{ 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
8. 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
9. 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
10. = => 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
11. 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
12. 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 ${ }`
13. Creating amazing experiences
14. Creating amazing experiences
15. Until you open devtools
16. Understanding React Re-rendering Mechanism
18. PARENT
19. PARENT
20. PARENT
21. Reactive UI React can sometimes be overly reactive.
22. Current options Manual Memoization
23. 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
24. 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
25. 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
26. 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
27. 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
28. 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
29. 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
30. 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
31. 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
32. 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
33. 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
34. 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
35. 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
36. 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
37. ? ... + : 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
38. 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
39. 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
40. Just Imagine Spending hours optimizing your React app, meticulously placing and , only to discover that you missed a `useMemo` `useCallback` component
41. Just Imagine Or worse, someone else on your team does it without even realizing.
42. Automating Optimization Enter the Compiler
44. AST build ir code optimized code Codegen
45. AST build ir code optimized code Codegen
46. AST build ir code optimized code Codegen 46 Steps
47. eslint Compiler core babel plugin
48. 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.
49. 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.
50. 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.
51. 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.
52. 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.
53. 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.
54. 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.
55. Codegen The compiler optimisations process generates the final optimised version of your code
56. 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.
57. 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.
58. 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
59. 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...
60. 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
61. 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
62. what we can do We've achieved beyond feature parity, improved memoization, and enhanced performance while maintaining developer experience.
63. what we can do We've achieved beyond feature parity, improved memoization, and enhanced performance while maintaining developer experience.
64. what we can do We've achieved beyond feature parity, improved memoization, and enhanced performance while maintaining developer experience.
65. Here is where the gold is For my friends
66. Your Workflow Adopting Compiler
68. Install Make work Make Right Make better
69. Install
70. Install
71. Install
72. For the compilation to work, it assumes that you are following the rules of React. Not magic
73. Rules Of React Components and Hooks must be pure React calls Components and Hooks The Rules of Hooks Compiler Optimizations @Vitormalencar
74. After enabling the compiler, continue debugging the app for optimal performance. You may be surprised... Do manual checks
75. 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
76. 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
77. 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
78. 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
79. Devtools Helper
80. Always check Make benchmarks and tests to compare before and after.
81. 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
82. And again Is not magic....
83. 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
84. Let's get it clear The React Compiler isn’t part of React 19
85. Let's get it clear The React Compiler isn’t part of React 19
86. Final Considerations
87. What is next Utilize new tools to enhance current projects.
88. What is next Certain libraries, such as MobX, may not be compatible with the new compiler.
89. What is next Just the beginning, envision expanding its capabilities beyond memoization.
90. What is next Or Maybe even removing dependency arrays altogether.... maybe
91. 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!
92. What When Where @vitormalencar React Compiler Automating Performance Optimization
93. What When Where @vitormalencar
94. What When Where @vitormalencar
95. What When Where @vitormalencar