You may have come across the concept of cleaning up your useEffect, which plays a significant role in preventing memory leaks and related issues. On the other hand, you might be unfamiliar with this cleanup process and have yet to experience its benefits. If you fall into this category and you're wondering what exactly the useEffect cleanup is about, let me give you a quick role of the cleanup function in useEffect.

The role of cleanup

The cleanup function in useEffect is meant to handle tasks that need to be executed when a component is no longer needed. It is crucial for preventing memory leaks, removing event listeners, canceling subscriptions, or undoing any setup that was done during the useEffect execution.

Does skipping useEffect cleanup make any difference?

It is similar to cooking a delicious meal without cleaning up your kitchen afterward. While the taste might be amazing, the mess left behind could leave you dealing with a lot of untidiness, unused ingredients, and dirty utensils. Similarly, skipping the useEffect cleanup can lead to a great app experience turning less enjoyable due to the messy leftovers of unattended resources.

By not providing a cleanup function, you risk leaving resources behind that can accumulate over time and degrade the performance and stability of your application.

Let me give you a quick example of how the useEffect cleanup works -

Imagine you're building a real-time notification feature for a social media app. You want to display notifications to users every 10 seconds. To achieve this, you decide to use the setInterval function along with the useEffect hook.

Using setInterval without Cleanup:

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

function NotificationComponent() {
  const [notification, setNotification] = useState('');

  useEffect(() => {
    const intervalId = setInterval(() => {
      fetchNewNotification()  // Simulated fetch for new notifications
        .then(newNotification => setNotification(newNotification));
    }, 10000);

    // Without cleanup the Interval continues even after component unmounts
  }, []);

  return (
    <div>
      <p>New Notification: {notification}</p>
    </div>
  );
}

export default NotificationComponent;

In this case, when a user visits the NotificationComponent, the setInterval starts to fetch new notifications every 10 seconds. However, if the user navigates away from this component to another part of the app, the component is unmounted. Without a cleanup function, the interval will continue running even though the component is no longer visible. This could lead to unnecessary network requests and processing, even when the user doesn't need notifications anymore. We sure do not want that. Now let's see how it works with the cleanup function.

Using setInterval with Cleanup:

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

function NotificationComponent() {
  const [notification, setNotification] = useState('');

  useEffect(() => {
    const intervalId = setInterval(() => {
      fetchNewNotification() // Simulated fetch for new notifications
        .then(newNotification => setNotification(newNotification));
    }, 10000);

    return () => {
      clearInterval(intervalId);  // The cleanup clears the interval when component unmounts
    };
  }, []);

  return (
    <div>
      <p>New Notification: {notification}</p>
    </div>
  );
}

export default NotificationComponent;

With the cleanup function added, the setInterval is cleared when the component is unmounted. This ensures that no unnecessary network requests are made and no processing occurs after the user has navigated away. The cleanup function helps to maintain a clean and efficient application by preventing pending intervals from running indefinitely. That makes sense right? I hope so.

Let me give you a non-technical scenario to make you understand better-

Imagine you're a librarian managing a cozy reading room in a bustling city library. Each day, readers come in to enjoy your collection of books, and you're responsible for ensuring that everything runs smoothly.

One day, you decide to host a special reading event where renowned authors will come to share their works. To prepare for this event, you set up additional seating, adjust the lighting, and even bring in a few extra bookshelves to display the authors' books. The event goes off without a hitch, and readers are delighted with the experience.

However, as the event concludes, you realize something crucial: you forgot to allocate time to undo all the setup you had arranged for the event. The extra seating remains, the special lighting is still on, and the additional bookshelves are cluttering the room. Over the next few days, despite no more events being planned, you continue to leave everything as it is.

Gradually, readers start noticing the changes – they find it harder to find their favorite books, the excess seating makes the room feel cramped, and the lighting becomes too harsh for relaxed reading. Your reading room starts to feel less welcoming and organized, and readers begin to consider other places to enjoy their books.

In this scenario, your reading room is similar to the notification component, and the special reading event represents the notification effect triggered by the useEffect hook. The setup you did for the event is the side effect caused by the useEffect, and the cleanup you forgot to do afterward is the missing cleanup function.

Just like the reading room needs to be returned to its original state after the event to prevent distractions, the notification component needs to be cleaned up properly after the effect is triggered. If you neglect to provide a cleanup function in the notification component, the interval will keep running even when the component unmounts, it's similar to leaving the reading room cluttered and disorganized. Over time, these accumulated effects can lead to degraded performance and unexpected behavior and I'm sure you don't want that.

Although you don't need to clean up every useEffect you make, there are times when you need to do so like when you're dealing with Event listeners, Timers and intervals, Subscriptions, Network requests etc.

Why you should clean up your useEffect

These are some of the reasons why you should clean up your useEffect so that you can have an efficient application.

1. To prevent memory Leaks: Failing to clean up resources like subscriptions can lead to memory leaks. Over time, these leaks can slow down your application resulting in a bad user experience.

2. To prevent Stale Data: If your effect fetches data asynchronously and doesn't clean up previous requests, you might encounter situations where the component displays data that is no longer relevant. bet you don't want that.

3. To Prevent Ghost Listeners and Unintended Triggers: Leaving event listeners active after a component unmounts can result in unexpected behavior, such as events being fired on non-existent components.

4. Ensuring complete Network Requests: If an effect initiates a network request and doesn't clean it up, the request might still be pending even after the component is no longer visible to the user.

Final Thoughts on Cleanup

Now that you've looked at the advantages of implementing cleanup procedures within a useEffect for a more seamless and efficient user experience in your application, it becomes evident that these practices are vital.

Embracing the concept of cleanups in useEffect not only enhances your coding practices but also elevates the overall quality of your application. So please clean up your useEffect :)