React Compiler

react_compiler.md

• Memoize every thing by hand is hard
• you can forget to memoize something
• you can wrongly memoize something that you shouldn't

-How the compiler does this optimization

• new euristics

• skiping unnecessary renders

• skipping unnecessary calculations

• React represents your UI as a tree of components

  • The tree is compose of nodes where each node is a component
  • when you change the state of a component the tree is updated
  • when the tree is updated the UI is re-rendered even if the state of the component did not change
  • Maybe react is too reactive even

• Rules of React

• Requirements

• Show differences between react and other frameworks now a days (angular, vue, etc)

• How we do memoization today

• Skiping re-renders

• Skiping expensive unnecessary calculations

• What is a compiler

  • Show how to create a basic compiler
  • React compiler is a drop in placement

• Rules of react

• Show how to create a basic compiler

  • Show normal code not optimized
  • Show optimized code with memo and useMemo
  • now show how to create a custom compiler that does the auto-optimizationH

• Show devtools helper showing compiler memoized components

• Compiler can memoize components better than we can do it manually

• show example with array of dependencies where we just depend on one key of the object

• computers are way better than us at tracking dependencies

• We still some meomization

  • the compiler will be great for cases where useMemo useCallback and Memo are used
  • React compiler will memoize for each component but For some cases when extensive computation we can controll better the memoization and memoize across the aplication

• How to adopt

  • Eslint plugin that wil highlight that does not comply with react rules
  • Helth checker plugin to estimate effort to optimize

• Final Considerations

  • Cases where you wan to optout of compiler
  • cases where it might now work

• Show component graph view before and after optimization