Skip to main content

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

useEffect()​

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

useLayoutEffect()​

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

useInsertionEffect()​

reserved Effect Hook for specific libraries

Effect​

Callback to run inside function, under certain conditions

Side Effect​

Effect with external Hidden Dependency that read/writes to External System

References​

  1. useInsertionEffect() ↔ reserved Effect Hook for specific libraries

  2. if runs every time, why not just run outside of hook as function? ↔ put inside Effect Hook to decouple function call from render; may allow optimization?