How would you handle memory leaks in a React functional component using hooks? Provide an example.

Memory leaks in React functional components often happen when asynchronous operations (like fetch, setTimeout, or subscriptions) try to update state after a component has unmounted. This causes a warning and can eventually lead to memory issues.

🧯 How to Handle Memory Leaks in Functional Components

The key tool here is the useEffect cleanup function. It runs when the component unmounts, or before the effect re-runs, letting you cancel timers, abort fetch requests, or unsubscribe from services.

✅ Example: Avoiding Memory Leak with fetch

import { useState, useEffect } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let isMounted = true; // flag to prevent state update if unmounted

    const fetchUser = async () => {
      setLoading(true);
      try {
        const response = await fetch(`/api/users/${userId}`);
        const data = await response.json();
        if (isMounted) {
          setUser(data);
          setLoading(false);
        }
      } catch (err) {
        if (isMounted) {
          console.error('Failed to fetch:', err);
          setLoading(false);
        }
      }
    };

    fetchUser();

    // Cleanup function to avoid state update if unmounted
    return () => {
      isMounted = false;
    };
  }, [userId]);

  if (loading) return <p>Loading...</p>;
  return <div>{user?.name}</div>;
}

🧠 Alternatives & Best Practices

1. AbortController for fetch:

const controller = new AbortController();
// use controller.signal in fetch
return () => controller.abort(); // cancels request if component unmounts

2. Clear timers:

const timer = setTimeout(() => { ... }, 1000);
return () => clearTimeout(timer);

3. Unsubscribe from services (e.g., sockets, observers):

socket.on('message', handleMessage);
return () => socket.off('message', handleMessage);

TL;DR

• Use the return function in useEffect to clean up side effects.

• Prevent state updates on unmounted components using flags or cancellation tools.

• Clean up timers, listeners, fetches, and subscriptions to prevent memory leaks.

Want an example with WebSockets or event listeners too?