A Guide to useEffect Cleanup

Currently, I am in phase two at Flatiron School and the past three weeks have been all things React. I have learned some great concepts that have definitely helped me become a better developer and one of those concepts is cleaning up the useEffect hook.

Why cleaning up is important

Let's say you have a function that continuously runs a timer component in the background

function Timer() {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    setInterval(() => {
      setTime(new Date());
    }, 1000);
  }, []);

  return <div>{time.toString()}</div>;
}

When this component first renders, the useEffect hook will initialize and create an interval that runs every 1 second and set the time. We could then set state and create a button that will hide and show the timer. We might imagine that this also means that the timer will stop running once it is hidden.

function App() {
  const [showTimer, setShowTimer] = useState(true);

  return (
    <div>
      {showTimer ? <Timer /> : null}
      <button onClick={() => setShowTimer(!showTimer)}>Toggle Clock</button>
    </div>
  );
}

However, this is not the case. Once you toggle the button, you will receive an error like the one below

This error indicates that even though the clock is hidden, it is still running continuously in the background and re-rendering the component every second. This could potentially cause unwanted behaviors and performance issues.

The solution to this error would be to create a clean up function that runs once the component is unmounted. With our example it would look a little something like this

function Timer() {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const timerID = setInterval(() => {
      setTime(new Date());
    }, 1000);

    // returning a cleanup function
    return function cleanup() {
      clearInterval(timerID);
    };
  }, []);

  return <div>{time.toString()}</div>;
}

Now once the timer is toggled off, the clean up function will run and clear the interval we set.

The cleanup function lifecycle

The lifecycle of our timer component without the clean up would look like this

And with the cleanup function added to our component's lifecycle would now look like this once the component is unmounted upon the click of the toggle off button

In summary, clean up functions are a great way to optimize the performance of your web app and to avoid unwanted behaviors. However, it is not always necessary to use clean up functions with your useEffect hooks. Scenarios like running timers, clocks or a subscription to a WebSocket connection are a few use cases where a clean up function is important.