DEV Community

Cover image for Do i need to use cleanup function on useEffect?
Clara Situma
Clara Situma

Posted on • Updated on

Do i need to use cleanup function on useEffect?

Whether or not you need to include a cleanup function in your useEffect hook depends on the type of side effect you are performing.

If your effect does not create any resources or side effects that need to be cleaned up, then you do not need to include a cleanup function.

For example, if your useEffect hook simply sets up an event listener or fetches data from an API, you do not need to include a cleanup function.

In these cases, the event listener or network request will be automatically cleaned up when the component is unmounted, so a cleanup function is not necessary.

Here is an example of a useEffect hook that does not need a cleanup function:

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Fetch data from an API
    fetchData().then(response => setData(response));
  }, []);

  return (
    // component render code here
  );
}
Enter fullscreen mode Exit fullscreen mode

In this example, the useEffect hook is used to fetch data from an API and update the component's state with the response.

The useEffect hook does not create any resources or side effects that need to be cleaned up, so a cleanup function is not necessary.

However, if your effect creates a resource or side effect that needs to be cleaned up when the component is unmounted or the effect is cleaned up, then you should include a cleanup function in your useEffect hook.

For example, if you create a timer or an interval in your effect, you should include a cleanup function to clear the timer or interval when the component is unmounted or the effect is cleaned up.

Here is an example of a useEffect hook that includes a cleanup function:

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Set up an interval to update the data every second
    const interval = setInterval(() => {
      fetchData().then(response => setData(response));
    }, 1000);

    // Return a cleanup function
    return () => {
      // Clear the interval when the component is unmounted or the effect is cleaned up
      clearInterval(interval);
    };
  }, []);

  return (
    // component render code here
  );
}
Enter fullscreen mode Exit fullscreen mode

In this example, the useEffect hook sets up an interval to update the component's data every second.

The useEffect hook also includes a cleanup function, which is returned from the callback passed to useEffect. This cleanup function will be called by React when the component is unmounted or the effect is cleaned up, and it will clear the interval that was created by the effect.

In general, it is good practice to include a cleanup function in your useEffect hook whenever you create a resource or side effect that needs to be cleaned up. This can help to avoid memory leaks and ensure that your application is well-behaved.

Top comments (2)

Collapse
 
miketalbot profile image
Mike Talbot ⭐ • Edited

I like the article, it's an important subject, but I do have one concern...

For example, if your useEffect hook simply sets up an event listener or fetches data from an API, you do not need to include a cleanup function.

If you add something to an event listener it may well NOT be automatically cleaned up, add an event listener to the document or another singleton event library and this is why you would use a cleanup function to remove it.

I tend to use Inversion Of Control via Events for my code structures and so most of my cleanup functions are removing event handlers! If I didn't there would be a load of garbage held by closures due to the registered handlers.

Collapse
 
csituma profile image
Clara Situma • Edited

I completetly agree.

Also think is an addition to why a cleanup would still be valid in such scenarios:
dev.to/brense/comment/23bfo