What is the React useEffect cleanup function, and how it works?

Detailed explanation about React’s useEffect cleanup function works.

Imagine that you have a React component that displays a list of items from an API. Every time the component is rendered, it fetches the latest list of items from the API and displays them to the user.

Let’s say the user decides to navigate away from this component to a different part of the app. The component is no longer being rendered, so there’s no need to continue fetching the list of items from the API. However, the fetch request is still ongoing in the background.

This is where the useEffect cleanup function comes in. The cleanup function is a function that is called when the component is unmounted (i.e., when it is no longer being rendered). It allows you to perform any necessary cleanup tasks, such as cancelling an ongoing API request.
To use the cleanup function, you can pass it as a return value from the useEffect hook. For example:

useEffect(() => {
  const fetchData = async () => {
    const response = await fetch(url);
    // do something with the response
  };
  fetchData();
  return () => {
    // cleanup function goes here
  };
}, [url]);

In this example, the fetchData function is called when the component is rendered. When the component is unmounted, the cleanup function is called, allowing you to cancel the ongoing fetch request if necessary.

First Example

Here are two examples of how you might use the useEffect cleanup function to cancel an ongoing API request in a real-world application:

import { useEffect, useState } from 'react';

function ExampleComponent() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    const interval = setInterval(() => {
      setCount(count + 1);
    }, 1000);
    return () => clearInterval(interval);
  }, [count]);
  return <div>{count}</div>;
}

In this example, the useEffect hook sets up an interval that increments the count state variable every second. The cleanup function returned by the useEffect hook cancels this interval by calling clearInterval when the component unmounts or re-renders. This ensures that the interval is not still running in the background after the component is no longer being used.

Second Example

This example will explain the absolute need for this cleanup function and how it can improve the performance of our application.
The useEffect cleanup function can be crucial when working with async operations, such as API requests because it allows you to cancel any ongoing async tasks before the component is unmounted.

Consider the following example:

import { useEffect, useState } from 'react';

function UserProfile() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    const fetchUser = async () => {
      const response = await fetch(`/api/users/${userId}`);
      const data = await response.json();
      setUser(data);
      setLoading(false);
    };
    fetchUser();
  }, [userId]);
  if (loading) {
    return <LoadingIndicator />;
  }
  return (
    <div>
      <h1>{user.name}</h1>
      {/* render other user data */}
    </div>
  );
}

In this example, the UserProfile component fetches and displays information about a particular user. If the component is unmounted (for example, if the user navigates away from the component), the ongoing API request will still be in progress in the background. This can cause unnecessary network traffic and potentially result in data inconsistencies if the response from the API is received after the component has been unmounted.

By using a useEffect cleanup function, you can cancel the ongoing API request when the component is unmounted, like so:

import { useEffect, useState } from 'react';

function UserProfile() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    const controller = new AbortController();
    const signal = controller.signal;
    const fetchUser = async () => {
      const response = await fetch(`/api/users/${userId}`, { signal });
      const data = await response.json();
      setUser(data);
      setLoading(false);
    };
    fetchUser();
    return () => {
      controller.abort();
    };
  }, [userId]);
  if (loading) {
    return <LoadingIndicator />;
  }
  return (
    <div>
      <h1>{user.name}</h1>
      {/* render other user data */}
    </div>
  );
}

> 

In this version of the UserProfile component, the useEffect cleanup function cancels the ongoing API request by calling the abort method on the AbortController instance. This ensures that the request is stopped when the component is unmounted, helping to prevent unnecessary network traffic and data inconsistencies.

Final Wording

The cleanup function can perform any necessary cleanup before the component is unmounted or cancel any ongoing processes that were started during the component’s lifecycle. This can be useful for ensuring that resources are adequately managed and that the component does not continue to run in the background after it is no longer being used.