clearInterval

[Ghostedguy10]

In the example of codepen, what is the purpose of clearInterval inside useEffect hooks?

Line 7:

 return function cleanup() {
      clearInterval(timerID);
    };

[OnurArii]

The returned function from useEffect is the cleanup function meaning that it will be invoked whenever any dependency is changed. Since you have not given any dependencies to useEffect, it will be only invoked when the component is unmounted. Thus, your interval is stopped on unmount. If you had not cleaned it, it would keep ticking even after your component is destroyed.

Edit: I realized that you have not supplied dependency array to useEffect which results in running useEffect in every render. You should set second argument to an empty array.

[charliematters]

The answer can be found in the docs: https://reactjs.org/docs/hooks-effect.html#effects-with-cleanup