Skip to main content

Deps Array ↔ Deps[] to pass as last arg to Trigger Hook

aka Dependency-Array, Depdencies-Array

Deps Array applies to useEffect(), useLayoutEffect(), useMemo() & useCallback()

React uses Referential Equality to determine if value in Deps Array changed

Dependency​

any Variable local to FC Scope to control Hook Trigger

Stable Variable​

Variable constant with each render

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. useMemo() ↔ Memoizing Hook to Memoize entire Component, some JSX or props, based on Deps Array change

  3. skipped [**_Deps Array_**](deps-array) ↔ runs on EVERY render

  4. skipping [**_Deps Array_**](deps-array) for [useMemo()](usememo) ↔ is pointless code! nothing gets memoized so don't do this!

  5. skipped [**_Deps Array_**](deps-array) is same as empty [**_Deps Array_**](deps-array) ↔ false

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

  7. useCallback() ↔ Memoizing Hook to Memoize Callback for given Deps Array