How to Properly Clean Up Effects in useEffect

7 min readJan 3, 2023

React’s useEffect hook is a powerful tool that allows developers to perform side effects in functional components. Very similar to what `componentDidMount` and `componentWillUnmount` did for class components. These side effects can include things like data fetching, setting up subscriptions, canceling subscriptions, and modifying the DOM.

However, it’s important to properly clean up these effects when they are no longer needed in order to avoid memory leaks and prevent unexpected behaviors. Such a mistake is commonly made by junior developers.

In this article, we will explore the various ways to properly clean up effects in useEffect. We’ll start by discussing the need for clean-up functions and then move on to more advanced techniques for cleaning up asynchronous and multiple effects. Finally, we’ll provide some best practices for ensuring proper cleanup in your own code.

The need for clean-up functions

When you use useEffect, React will automatically clean up the effect after it runs. However, there are certain situations where you need to manually clean up the effect yourself.

One reason for this is to avoid memory leaks. When an effect is no longer needed, it’s important to properly dispose of any resources that it was using. For example, if you set up a subscription in an effect, you’ll need to unsubscribe from that subscription in the clean-up function in order to prevent a memory leak.

Another reason to clean up effects is to avoid unexpected behavior. For example, if you set up an effect to fetch data from an API, you’ll need to cancel that effect if the user navigates away from the page before the data finishes loading. Otherwise, the effect will continue to run and could potentially set state in a component that is no longer being rendered.

In short, cleaning up effects by using the return statement or a clean-up function are an essential part of using useEffectcorrectly and avoiding potential issues in your code.

Cleaning up effects with the return statement

One way to clean up an effect in useEffect is to use the return statement. When you return a function from useEffect, React will use that function as a clean-up function that runs before the component is unmounted or the effect is re-run.

Here’s a basic example of using the return statement to clean up an effect:

useEffect(() => {
  const subscription = someAPI.subscribe(() => {
    // do something
  });
  return () => {
    subscription.unsubscribe();
  }
});

In this example, we are setting up a subscription to an API in the effect. When the component is unmounted or the effect is re-run, the clean-up function will be called and the subscription will be unsubscribed. This ensures that we don’t end up with a memory leak.

You can also use the return statement to cancel an effect that is in progress. For example, if you have an effect that fetches data from an API, you can use the return statement to cancel the effect if the user navigates away from the page before the data finishes loading:

useEffect(() => {
  const controller = new AbortController();
  const signal = controller.signal;

  const fetchData = async () => {
    try {
      const response = await fetch(url, { signal });
      // do something with the response
    } catch (error) {
      if (error.name === 'AbortError') {
        console.log('Fetching data was cancelled');
      } else {
        throw error;
      }
    }
  }
  fetchData();
  return () => {
    controller.abort();
  }
});

In this example, we are using the AbortController API to cancel the fetch request if the component is unmounted or the effect is re-run. The return statement is used to call the abort() method on the controller, which cancels the fetch request.

Below is an example for those who are using axios instead of fetch:

useEffect(() => {
  const cancelToken = axios.cancelToken.source();

  const fetchData = async () => {
    try {
      const response = await axios.get(url, { cancelToken: cancelToken.token})
      // do something with the response
    } catch (error) {
      if (axios.isCancel(error)) {
        console.log('Fetching data with axios was cancelled');
      } else {
        throw error;
      }
    }
  }
  fetchData();
  return () => {
    cancelToken.cancel();
  }
});

Overall, the return statement is a simple and effective way to clean up effects in useEffect.

Cleaning up effects with a clean-up function

Another way to clean up an effect in useEffect is to use a clean-up function. A clean-up function is a function that is called after the main effect function has been completed, but before the component is unmounted or the effect is re-run.

Here’s a basic example of using a clean-up function to clean up an effect:

useEffect(() => {
  const subscription = someAPI.subscribe(() => {
    // do something
  });

  return () => {
    subscription.unsubscribe();
  }
});

In this example, the clean-up function is the anonymous function that is returned from useEffect. This function is called after the main effect function (setting up the subscription) has been completed, and it unsubscribes from the subscription in order to avoid a memory leak.

So when should you use a clean-up function instead of the return statement? It really depends on the specific needs of your application. If you only need to clean up a single effect, the return statement is usually the simpler and more straightforward option. However, if you need to clean up multiple effects or perform more complex clean-up tasks, a clean-up function can be a more powerful and flexible solution.

Overall, the choice between using a clean-up function or the return statement will depend on the complexity of your clean-up tasks and your personal preference as a developer.

Advance clean-up functions

So far, we’ve covered the basics of cleaning up effects in useEffect. However, there are a few more advanced techniques that you might find useful in certain situations.

One of these techniques is cleaning up effects that involve asynchronous functions. For example, suppose you have an effect that sets up a timer using setInterval:

useEffect(() => {
  const timer = setInterval(() => {
    // do something
  }, 1000);
  return () => {
    clearInterval(timer);
  }
});

In this example, the clean-up function uses clearInterval to cancel the timer when the component is unmounted or the effect is re-run. However, if the timer function itself is asynchronous, you’ll need to use a slightly different approach:

useEffect(() => {
  const timer = setInterval(async () => {
    try {
      // do something asynchronously
    } catch (error) {
      clearInterval(timer);
    }
  }, 1000);
  return () => {
    clearInterval(timer);
  }
});

In this example, we are using a try-catch block to handle any errors that might occur in the timer function. If an error occurs, we clear the interval using clearInterval. This is important because if an error occurs and the interval isn’t cleared, the timer function will continue to run indefinitely. In others words, we have a backup plan if the first error doesn’t clear the interval.

Another advanced technique is cleaning up multiple effects in a single function. This can be useful if you have multiple effects that need to be cleaned up in a specific order or if you want to reuse the same clean-up logic for multiple effects.

Here’s an example of cleaning up multiple effects in a single function:

useEffect(() => {
  const subscription1 = someAPI.subscribe(() => {
    // do something
  });
  const subscription2 = anotherAPI.subscribe(() => {
    // do something else
  });

  return () => {
    subscription1.unsubscribe();
    subscription2.unsubscribe();
  }
});

In this example, we are setting up two subscriptions in the main effect function. The clean-up function is then responsible for unsubscribing from both subscriptions in the correct order. This ensures that the subscriptions are cleaned up properly and avoids any potential issues or unexpected behaviors.

Overall, these advanced techniques can be useful for handling more complex clean-up tasks in useEffect. However, you should only use them if they are necessary for your specific use case. In most cases, the basic techniques we covered earlier (using the return statement or a clean-up function) will be sufficient.

Best practice for useEffect clean up

Now that we’ve covered the various techniques for cleaning up effects in useEffect, let’s review some best practices for ensuring proper cleanup in your own code.

First and foremost, it’s important to consider the specific needs of your application when deciding how to clean up your effects. Different effects may have different requirements for cleanup, and it’s up to you as the developer to determine the best approach for each case. For example, if you have an effect that sets up a timer using setInterval, you’ll need to use a different technique to clean up that effect than you would for an effect that sets up a subscription to an API.

Another important best practice is to thoroughly test and debug your clean-up functions. It’s easy to overlook small mistakes when writing clean-up code, so it’s important to make sure that your functions are working as intended. One way to do this is to use a tool like the React Developer Tools browser extension, which allows you to inspect the state of your components and see when effects are being cleaned up. Another way is to use React strict mode which is a tool for highlighting potential problems in an application. Basically, it activates additional checks and warnings for its descendants.

An example of using strict mode:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
 <React.StrictMode>
   <App />
  </React.StrictMode>
);

Finally, it’s a good idea to document your clean-up functions clearly and concisely. This will help other developers (including your future self) understand how your effects are being cleaned up and make it easier to maintain and update the code in the future.

Overall, following these best practices will help you ensure that your `useEffect` clean-up code is effective and maintainable.

Conclusion

In this article, we’ve explored the various techniques for cleaning up effects in React’s useEffect hook. I hope you found this helpful and are excited about cleaning up effects in your useEffect methods.