Side-effects

For side-effects other than simply changing the application state we'll be using the useEffect hook. There's three parts to each useEffect hook: setup, cleanup, and dependencieswhere cleanup and dependenciesare optional.

useEffect(
    () => {
        // body of a setup function
        return () => {} // cleanup function
    },
    [] // dependency array
)

Setup

The setup is where all the hook's logic is placed.

useEffect(() => {
    console.log("setup")
    window.addEventListener("mousemove", (event: MouseEvent) => {
        setPosition({ x: event.clientX, y: event.clientY })
    })
})

Hook written like that will run on each render, and create a myriad of event listeners.

In fact this code will break your browser.

Cleanup

The setup can return a function that will be called when its time to "undo" the changes the hook has made.

useEffect(() => {
    console.log("setup")
    const handler = (event: MouseEvent) => {
        setPosition({ x: event.clientX, y: event.clientY })
    }

    window.addEventListener("mousemove", handler)

    return () => {
        console.log("cleanup")
        window.removeEventListener("mousemove", handler)
    }
})

Dependencies

We really only want the hook to run once:

useEffect(() => {
    console.log("setup")
    const handler = (event: MouseEvent) => {
        setPosition({ x: event.clientX, y: event.clientY })
    }

    window.addEventListener("mousemove", handler)

    return () => {
        console.log("cleanup")
        window.removeEventListener("mousemove", handler)
    }
}, [])

Second argument to the useEffect function is the array of dependencies. Hook behavior changes depending what's in it:

  • null or undefined: the hook will run for every render

  • [] (empty array): the hook will run once, after the first render

  • [value1, value2]: the hook will only run when one of the values changes

Resources

PreviousSide-effects and contextNextProp drilling

Last updated