Video Tutorial The useEffect hook

The useEffect hook is a hook that will be used to trigger a function asynchronously when the state of the component changes. This can allow to apply side effects or can allow to reproduce the logic that we put before in the methods componentDidMount and componentWillUnmount.

function Counter () {
    const (count, increment) = useIncrement (0, 2)

    useEffect (() => {
        const timer = window.setInterval (() => {
            increment()
        }, 1000)

        return function () {
            clearInterval (timer)
        }
    }, ())

    useEffect (() => {
        document.title = "Counter" + count
    }, (count))

    return Increment {count}
}

useEffect first takes a function which will be executed when one of its dependencies changes (this function is executed asynchronously and will not block the rendering of the component). The second parameter is an array which allows you to define the dependencies of this hook (this allows you to not execute the function unless an element has changed for this component). If you do not put any dependency (an empty array) in this case the function passed as the first parameter will only be executed during the assembly of the component.

The function that serves as the first parameter can return a function that will be used to clean up the behaviors that could have been implemented in a previous step.