React: Note on what happens during rendering and re-rendering

• this is a note on what goes on when a component renders and re-renders
  
• notes are from watching React Render Tutorial - YouTube
  

Rendering has 2 phases:
Initial Render:
      Render phase:
       -start at root
       -goes down leaf components
       -use createElement() to convert jsx to react elements

      Commit phase:
       -all react elements are handed to commit phase and are applied to the DOM

Rerender:
      Render phase:
       -search all components that have been flagged as needing updates (useState setState method, useReducer dispatch method)
       -convert flagged components to react elements
       -compare previous virtual DOM to new virtual DOM
       -if components convert to same element as previous then discarded

      Commit phase:
       -all the changed elements are handed to commit phase and are applied to the DOM

useState
* The setter function from a useState hook will cause the component to re-render. * The exception is when update a State Hook to the same value as the current state.
      -Same value after initial render? component will not re-render.
      - Same value after re-render? React will render that specific component one more time but will be discarded before going to commit phase

useReducer
* The dispatch function from a useReducer hook will cause the component to re-render.
* The exception is when update a State Hook to the same value as the current state.
      -Same value after initial render? component will not re-render.
      -Same value after re-render? React will render that specific component one more time but will be discarded before going to commit phase

State Immutability
* Mutating an object or an array as state will not cause a re-render when used with the useState or useReducer hook
* To re-render, make a copy of the existing state, modify as necessary and then pass the new state to the setter function or while returning from a reducer function

Parent & Child
* When parent component re-renders, all child components re-render
* New state same as old state after initial render? Both parent and child do not re-render
* New state same as old state after re-render? Parent re-renders one more time but child never re-renders
* Child components re-rendering but not affecting the DOM is “unnecessary render”

Same element reference
-To avoid “unnecessary renders”,
* extract the child component and pass it down as a prop of the parent component (as children element)
* Whenever there is a re-render caused by a change in the state of the parent component, React will optimize the re-render for you by knowing that the props has to be referencing the same element before and after the render

React Memo
* In React, when a parent component renders ,a child component might unnecessarily render.
* To optimize this behavior, you can use React.memo and pass in the child component.
* React.memo will perform a shallow comparison of the previous and new props and re-render the child component only if the props have changed.

Incorrect React Memo
-React.Memo in child component for all cases
-when parent component re-renders for all cases
 ・Parent Child
     - If the child component has children elements as props, child component will re-render even with React.Memo because children elements are always a new reference
 ・Impure component
     - Even if the child component has a variable that can change (date, random, etc) the child component will not re-render because of React.Memo
 ・Prop reference
     -If child component has objects or functions as props from parent component, child component will always re-render even with React.Memo because every time the parent component re-renders, new objects and functions are created.