Learn React Hooks

The useEffect Hook

The useEffect Hook accepts a function that contains code with side effects, such as timers and subscriptions. The function passed to the Hook will run after the render is done and the component is on the screen:

useEffect(() => {    // do something})

A cleanup function can be returned from the Hook, which will be called when the component unmounts and is used to, for example, clean up timers or subscriptions:

useEffect(() => {    const interval = setInterval(() => {}, 100)    return () => {        clearInterval(interval)    }})

The cleanup function will also be called before the effect is triggered again, when dependencies of the effect update.

To avoid triggering the effect on every re-render, we can specify an array of values as the second ...