Skip to main content

Effect ↔ Callback to run inside function, under certain conditions

References​

  1. Run [**_Effect_**](effect) once **onMount** ↔ call useEffect() with empty Deps Array

  2. Run [**_Effect_**](effect) once **onMount** + [Cleanup](cleanup-function) ↔ call useEffect() with empty Deps Array & return Cleanup Function

  3. Run [**_Effect_**](effect) on specific renders ↔ call useEffect() with relevant data in Deps Array

useEffect(() => { document.title = title
  }, [title] )

  1. Run [**_Effect_**](effect) + [Cleanup](cleanup-function) on **specific renders** ↔ call useEffect() with property in Deps Array & Cleanup Function

  2. Run [**_Effect_**](effect) [Sync](sync) before repaint [DOM API](dom-api) ↔ useLayoutEffect()

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

  4. Side Effect ↔ Effect with external Hidden Dependency that read/writes to External System

  5. Passive Effect ↔ Effect invoked through passive event

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

  7. useLayoutEffect() ↔ Hook variant of useEffect(), to call Effect as soon as DOM API generated BEFORE UI repaints to DOM API

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