Mastering useEffect in React.js: Part 3

Understanding cleanup functions in React's useEffect hook is crucial for building robust, production-ready applications. While effects without cleanup may appear to work initially, they can lead to serious performance degradation, memory leaks, and unexpected behavior in real-world scenarios.

The useEffect cleanup function is an optional function you can return from within the useEffect Hook that handles the cleanup of side effects to prevent memory leaks and unwanted behavior in your application.

useEffect(() => {
    // Setup the side effect
    const intervalId = setInterval(() => {
      setCount(c => c + 1);
    }, 1000);

    // Return the cleanup function
    return () => {
      clearInterval(intervalId); // Tidy up the interval
    };
  }, []); // Empty dependency array means it runs on mount and cleans up on unmount

The cleanup function should stop or undo whatever the setup function was doing.

Purpose and When It Runs

It runs in two main scenarios:

Before the component unmounts (removed from the DOM).
Before the effect runs again due to a change in its dependencies.

This ensures that the previous effect is tidied up before a new one is initiated, preventing issues like trying to update the state of an unmounted component or having multiple intervals running simultaneously. It is very important to clean up to prevent unwanted issues at production grade application.

The Problem: Resource Leaks in Component Lifecycles

Consider a real-time dashboard that displays user activity data. The component fetches updates every 5 seconds using a polling mechanism:

function UserActivityDashboard() {
  const [activities, setActivities] = useState([]);

  useEffect(() => {
    const interval = setInterval(() => {
      fetchUserActivities().then(data => {
        setActivities(data);
      });
    }, 5000);
  }, []);

  return (
    <div>
      {activities.map(activity => (
        <ActivityCard key={activity.id} {...activity} />
      ))}
    </div>
  );
}

The Critical Flaw: When this component unmounts (user navigates away), the interval continues executing in the background. Each time the user returns to the dashboard, a new interval is created without clearing the previous one. Since this browser APIs are outside of react control it will be keep running even though component is not present on page, react knows that but browser does not.

Consequences Without Cleanup:

Multiple intervals run simultaneously, multiplying API requests
Server load increases exponentially with each component mount/unmount cycle
Memory consumption grows continuously as abandoned intervals accumulate
State updates may be attempted on unmounted components, triggering React warnings
API rate limits may be exceeded, causing service degradation
Increased infrastructure costs from unnecessary network traffic

The Solution: Implementing Cleanup Functions

The cleanup function returned from useEffect executes when the component unmounts or before the effect runs again, ensuring proper resource disposal:

function UserActivityDashboard() {
  const [activities, setActivities] = useState([]);

  useEffect(() => {
    const interval = setInterval(() => {
      fetchUserActivities().then(data => {
        setActivities(data);
      });
    }, 5000);

    // Cleanup function - runs on unmount
    return () => {
      clearInterval(interval);
    };
  }, []);

  return (
    <div>
      {activities.map(activity => (
        <ActivityCard key={activity.id} {...activity} />
      ))}
    </div>
  );
}

The cleanup function ensures that when the component unmounts, the interval is properly cleared, preventing the accumulation of background processes.

Common Scenarios Requiring Cleanup

1. WebSocket Connections

WebSocket connections maintain persistent, bidirectional communication channels between client and server:

useEffect(() => {
  const ws = new WebSocket('wss://api.example.com/live');

  ws.onmessage = (event) => {
    setMessages(prev => [...prev, event.data]);
  };

  return () => {
    ws.close();
  };
}, []);

What This Does: The effect establishes a WebSocket connection and registers a message handler. When messages arrive from the server, they're added to the existing messages array using the functional form of setState (prev => [...prev, event.data]), which ensures we're working with the most current state.