Summary and Key Takeaways

• React components are re-evaluated (executed) whenever their state changes or the parent component is evaluated.
• React optimizes component evaluation by calculating required user interface changes with help of a virtual DOM first.
• Multiple state updates that occur at the same time and in the same place are batched together by React. This ensures that unnecessary component evaluations are avoided.
• The memo() function can be used to control component function executions.
• memo() looks for prop value differences (old props versus new props) to determine whether a component function must be executed again.
• useMemo() can be used to wrap performance-intensive computations and only perform them if key dependencies changed.
• Both memo() and useMemo() should be used carefully since they also come at a cost (the comparisons performed).
• The initial code download size can be reduced with help of code splitting via the lazy() function (in...