Skip to main content

Component Lifecycle

[<span data-tooltip-id="preview__9Le7zdA2R4LzoE852">FC</span>](fc) will only render when

Render​

(process)

Mount​

(process) to add UI to DOM API

Unmount​

(process) to remove UI from DOM API

Re-render​

(process)

Render Props​

Providing function as props to render JSX

!deprecated CC Lifecycle Method

Most Browser render 60 FPS & will drop frames if React takes longer than ~16ms to render!

UI updates of 100ms will appear instantaneous to most users

FPS​

Frames Per Second

References​

  1. useEffect() ↔ Hook to run Effect in FC at specific stage of Component Lifecycle, set by Deps Array

  2. Effect Hook ↔ (typeof) Hook to run Effect inside Component at different stages of Component Lifecycle

  3. Lifecycle Method ↔ method to perform Effect at specific stage of Component Lifecycle