useEffect

effect

We register an effect with useEffect. The effect is a fancy name for a function that React runs at specific times.

run effect after first paint...

React runs the effect after the component's first paint, so that it does not block or delay it.

We prioritize UI responsiveness. To avoid any slowdown, the effect we define and register in useEffect runs only after the initial UI has been painted on screen. If some data is missing, we may paint a blank screen, a spinner or a skeleton.

For example, fetch takes a long time to complete, so it cannot block the main UI.

...then conditionally

The dependency array signals a dependency that should trigger the effect again on any change to it.

clean up

React runs the clean up function when the component unmounts.

synopsis

useEffect(effect, dependencies)

effect function

the effect function may not use top level await, because it may not be an async function.

function myEffect() {
    /* effect content */

    return /* clean up content */
}

dependencies

useEffect(effect, []) // once
useEffect(effect, [x]) // once, then when x changes
useEffect(effect) // on every render