Preventing Memory Leaks in React with Proper Cleanup

Memory leaks in React applications often occur when components don’t properly clean up subscriptions, event listeners, or asynchronous operations before unmounting. Here’s how to identify and fix these issues.

Common Sources of Memory Leaks

1. Unclosed Subscriptions

// ❌ Dangerous - no cleanup
useEffect(() => {
  socket.on('message', handleMessage);
}, []);

2. Pending Async Operations

// ❌ Risky - might set state after unmount
useEffect(() => {
  fetch('/api/data')
    .then(res => res.json())
    .then(data => setData(data));
}, []);

3. Unremoved Event Listeners

// ❌ Problematic - listener remains
useEffect(() => {
  window.addEventListener('resize', handleResize);
}, []);

Proper Cleanup Patterns

1. Basic Cleanup Function

// ✅ Correct - cleanup function
useEffect(() => {
  socket.on('message', handleMessage);

  return () => {
    socket.off('message', handleMessage); // Cleanup
  };
}, [handleMessage]);

2. Aborting Fetch Requests

// ✅ Proper async cleanup
useEffect(() => {
  const abortController = new AbortController();

  fetch('/api/data', { signal: abortController.signal })
    .then(res => res.json())
    .then(data => setData(data))
    .catch(err => {
      if (err.name !== 'AbortError') {
        setError(err.message);
      }
    });

  return () => {
    abortController.abort(); // Cancel pending request
  };
}, []);

3. Timer Cleanup

// ✅ Cleaning up intervals
useEffect(() => {
  const intervalId = setInterval(() => {
    updateClock();
  }, 1000);

  return () => {
    clearInterval(intervalId); // Clear on unmount
  };
}, []);

Advanced Patterns

1. Custom Hook with Cleanup

function useWebSocket(url, callback) {
  useEffect(() => {
    const ws = new WebSocket(url);
    ws.onmessage = callback;

    return () => {
      ws.close(); // Cleanup connection
    };
  }, [url, callback]);
}

// Usage
function Chat() {
  useWebSocket('wss://example.com', handleMessage);
  // ...
}

2. Tracking Mount State

// ✅ Preventing state updates after unmount
useEffect(() => {
  let isMounted = true;

  fetchData().then(data => {
    if (isMounted) { // Only update if still mounted
      setData(data);
    }
  });

  return () => {
    isMounted = false; // Cleanup
  };
}, []);

3. Complex Subscription Management

// ✅ Managing multiple subscriptions
useEffect(() => {
  const subscriptions = [
    store.subscribe(handleStoreUpdate),
    eventBus.on('refresh', handleRefresh),
    window.addEventListener('online', handleOnline)
  ];

  return () => {
    subscriptions.forEach(unsubscribe => unsubscribe());
    window.removeEventListener('online', handleOnline);
  };
}, []);

Best Practices

1. Always return a cleanup function from useEffect when setting up anything persistent
2. Cancel async operations using AbortController
3. Remove all event listeners you add
4. Clear all timers (setTimeout, setInterval)
5. Close all connections (WebSocket, Socket.IO)
6. Use linting rules to catch missing cleanups
7. Test component unmounting in your test suite

Common Leak Scenarios to Watch

1. Single Page Applications where components mount/unmount frequently
2. Tabbed interfaces where users switch between views
3. Dynamic lists where items are added/removed
4. Route changes in React Router applications
5. Modal dialogs that open and close

Debugging Memory Leaks

1. Use Chrome DevTools Memory tab to take heap snapshots
2. Look for detached DOM trees in Memory tab
3. Monitor event listeners in Elements → Event Listeners tab
4. Use React DevTools profiler to detect unexpected re-renders
5. Watch for console warnings about state updates on unmounted components

Remember that proper cleanup is essential for:

• Preventing memory leaks
• Avoiding “can’t perform state update” warnings
• Reducing unnecessary network/CPU usage
• Creating professional, production-ready applications