Scribd
Upload
17 views

TinyHouse UseEffect Sheet

useEffect is React's hook for running imperative and effectful code. It accepts a function as the effect and an optional dependency array. With no dependencies, the effect runs on mount and unmount. With dependencies, the effect runs on mount and whenever a dependency changes. A cleanup function returned from the effect runs before the next effect or on unmount.

Uploaded by

Jackson Souza
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
17 views

TinyHouse UseEffect Sheet

useEffect is React's hook for running imperative and effectful code. It accepts a function as the effect and an optional dependency array. With no dependencies, the effect runs on mount and unmount. With dependencies, the effect runs on mount and whenever a dependency changes. A cleanup function returned from the effect runs before the next effect or on unmount.

Uploaded by

Jackson Souza
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

useEffect

React’s useEffect Hook

dependency array to contain


dependencies that when changed -
trigger the effect to run

useEffect(effect,deps);
function that is to
run imperative and
likely effectful
code

Run effect on every render

function passed into the hook


is the “effect” that is to run
on every render

Run effect only on first render

passing an empty array as the


dependencies list tells React
to never re-run the effect.


effect will only run on first
component render (i..e.
component mount)

Run effect on first render and re-run


when dependency changes

passing a dependency in the


dependencies list (e.g. a prop
or state value) will tell React
to re-run the effect every
time the dependency changes

Run effect with cleanup

a function returned from the


effect callback is the effect
cleanup.


the effect cleanup runs
before the effect of the
next render is to run or when
the component unmounts

You might also like