Skip to main content

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

image

Deps Array as 2nd Argument to useEffect(), to control when Effect runs during Component Lifecycle

Cleanup Function​

function call on Unmount, via return function from useEffect()

Run [Effect](effect) once **onMount**​

call useEffect() with empty Deps Array

Run [Effect](effect) once **onMount** + [Cleanup](cleanup-function)​

call useEffect() with empty Deps Array & return Cleanup Function

Run [Effect](effect) on specific renders​

call useEffect() with relevant data in Deps Array

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

Run [Effect](effect) + [Cleanup](cleanup-function) on **specific renders**​

call useEffect() with property in Deps Array & Cleanup Function

Run Effect Sync before repaint DOM API​

useLayoutEffect()

Run [<span data-tooltip-id="preview__mC8da8cPBCmZswDvi">Effect</span>](effect) with [<span data-tooltip-id="preview__gKLotm4cZGAgEd8aR">async</span>](async_async) [<span data-tooltip-id="preview__FhBLthubWDDGWoe4E">await</span>](await) [<span data-tooltip-id="preview__nfNpKx5WPRBZf7dS4">Fetch API</span>](fetch-api)

variables need to be added to [deps] if​

declared inside fn or received as props

imported variables do not need to be added to deps

!snippets useEffect

References​

  1. Cleanup Function ↔ function call on Unmount, via return function from useEffect()

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

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

  4. 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. useLayoutEffect() ↔ Hook variant of useEffect(), to call Effect as soon as DOM API generated BEFORE UI repaints to DOM API

  3. Run [**_useEffect()_**](useeffect) only [Cleanup](cleanup-function) for [Unmount](unmount) ↔ double Arrow Function to return Cleanup Function

useEffect(() => () => CLEANUP(),
  [] )