Memory Leaks in React

Master React memory leaks with free flashcards and spaced repetition practice. This lesson covers identifying memory leaks, preventing them with cleanup functions, and debugging techniques—essential concepts for building performant React applications that scale.

Welcome 👋

Memory leaks are one of the most insidious problems in React applications. They occur silently in the background, gradually degrading performance until your app becomes sluggish or crashes. Unlike syntax errors that fail immediately, memory leaks accumulate over time, making them challenging to detect and fix.

In this comprehensive lesson, you'll learn:

• 🔍 What memory leaks are and how they manifest in React
• 🧹 Essential cleanup patterns for hooks and lifecycle methods
• ⚠️ Common scenarios that cause leaks (async operations, event listeners, timers)
• 🛠️ Tools and techniques for detecting and debugging memory leaks
• 💡 Best practices for preventing leaks before they occur

Core Concepts 💻

What is a Memory Leak?

Memory leaks occur when your application allocates memory but fails to release it after it's no longer needed. In React, this typically happens when:

1. Components unmount but leave behind active subscriptions, timers, or event listeners
2. Asynchronous operations complete after a component has unmounted
3. References to unmounted components are retained by closures or global objects

┌─────────────────────────────────────────┐
│     MEMORY LEAK LIFECYCLE               │
├─────────────────────────────────────────┤
│                                         │
│  📦 Component Mounts                    │
│       ↓                                 │
│  🔌 Creates subscription/timer          │
│       ↓                                 │
│  ❌ Component Unmounts                  │
│       ↓                                 │
│  ⚠️  Subscription still active!         │
│       ↓                                 │
│  💾 Memory not released                 │
│       ↓                                 │
│  📈 Heap grows over time                │
│                                         │
└─────────────────────────────────────────┘

The Unmounted Component Problem

The most common memory leak pattern in React involves state updates on unmounted components. Consider this scenario:

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

  useEffect(() => {
    fetchUser(userId).then(data => {
      setUser(data); // ⚠️ What if component unmounts during fetch?
    });
  }, [userId]);

  return <div>{user?.name}</div>;
}

If the user navigates away before fetchUser completes, React will call setUser on an unmounted component, causing a memory leak and this warning:

"Warning: Can't perform a React state update on an unmounted component."

Memory Leak Symptoms 🔍

How do you know if your app has memory leaks?

Symptom	Description	When It Appears
🐌 Slowdown	App gets progressively slower	After repeated navigation
💾 Memory Growth	Heap size increases continuously	Visible in DevTools Memory profiler
⚠️ Console Warnings	"Can't perform state update..." messages	When navigating between routes
🔥 Browser Crash	Tab becomes unresponsive	After extended usage
🎭 Stale Closures	Old data appears unexpectedly	When components re-render

Cleanup Functions: Your First Defense 🧹

The cleanup function (also called the "teardown" or "destructor") is returned from useEffect and runs when:

1. The component unmounts
2. Before the effect runs again (when dependencies change)

useEffect(() => {
  // Setup code
  const subscription = dataSource.subscribe();
  
  // Cleanup function
  return () => {
    subscription.unsubscribe();
  };
}, [dependency]);

Key principle: Every resource your effect creates should be cleaned up. Think of it as "undoing" everything the effect did.

Common Memory Leak Scenarios 🎯

1. Async Operations (Fetch, Promises)

The Problem: Network requests don't automatically cancel when components unmount.

❌ Leaky Code:

function ArticleViewer({ articleId }) {
  const [article, setArticle] = useState(null);

  useEffect(() => {
    fetch(`/api/articles/${articleId}`)
      .then(res => res.json())
      .then(data => setArticle(data)); // ⚠️ Leak if unmounted!
  }, [articleId]);

  return <article>{article?.content}</article>;
}

✅ Fixed with Cleanup Flag:

function ArticleViewer({ articleId }) {
  const [article, setArticle] = useState(null);

  useEffect(() => {
    let isMounted = true;

    fetch(`/api/articles/${articleId}`)
      .then(res => res.json())
      .then(data => {
        if (isMounted) {
          setArticle(data); // ✅ Only update if still mounted
        }
      });

    return () => {
      isMounted = false; // 🧹 Cleanup: mark as unmounted
    };
  }, [articleId]);

  return <article>{article?.content}</article>;
}

✅ Better: AbortController (Modern Approach):

function ArticleViewer({ articleId }) {
  const [article, setArticle] = useState(null);

  useEffect(() => {
    const controller = new AbortController();

    fetch(`/api/articles/${articleId}`, { 
      signal: controller.signal 
    })
      .then(res => res.json())
      .then(data => setArticle(data))
      .catch(err => {
        if (err.name !== 'AbortError') {
          console.error('Fetch error:', err);
        }
      });

    return () => {
      controller.abort(); // 🧹 Actually cancel the request
    };
  }, [articleId]);

  return <article>{article?.content}</article>;
}

💡 Tip: AbortController is preferred because it actually cancels the network request, saving bandwidth. The boolean flag approach only prevents the state update but the request still completes.

2. Event Listeners 🎧

The Problem: Event listeners registered on window, document, or DOM elements persist after component unmount.

❌ Leaky Code:

function ScrollTracker() {
  const [scrollY, setScrollY] = useState(0);

  useEffect(() => {
    const handleScroll = () => {
      setScrollY(window.scrollY);
    };

    window.addEventListener('scroll', handleScroll);
    // ⚠️ Never removed!
  }, []);

  return <div>Scroll position: {scrollY}px</div>;
}

✅ Fixed with Cleanup:

function ScrollTracker() {
  const [scrollY, setScrollY] = useState(0);

  useEffect(() => {
    const handleScroll = () => {
      setScrollY(window.scrollY);
    };

    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll); // 🧹
    };
  }, []);

  return <div>Scroll position: {scrollY}px</div>;
}

🧠 Mnemonic: "Every add needs a remove" - if you add a listener, you must remove it.

3. Timers and Intervals ⏰

The Problem: setTimeout and setInterval continue running even after unmount.

❌ Leaky Code:

function CountdownTimer({ seconds }) {
  const [timeLeft, setTimeLeft] = useState(seconds);

  useEffect(() => {
    const timer = setInterval(() => {
      setTimeLeft(prev => prev - 1); // ⚠️ Runs forever!
    }, 1000);
  }, []);

  return <div>Time left: {timeLeft}s</div>;
}

✅ Fixed with Cleanup:

function CountdownTimer({ seconds }) {
  const [timeLeft, setTimeLeft] = useState(seconds);

  useEffect(() => {
    const timer = setInterval(() => {
      setTimeLeft(prev => prev - 1);
    }, 1000);

    return () => {
      clearInterval(timer); // 🧹 Clear the interval
    };
  }, []);

  return <div>Time left: {timeLeft}s</div>;
}

💡 Tip: Store the timer ID returned by setTimeout/setInterval so you can clear it later.

4. Subscriptions (WebSockets, Observable Libraries) 📡

The Problem: External subscriptions (RxJS, WebSocket, Firebase, etc.) don't auto-cleanup.

❌ Leaky Code:

function LiveChat({ roomId }) {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    const socket = io('https://chat.example.com');
    
    socket.on('message', (msg) => {
      setMessages(prev => [...prev, msg]);
    });

    socket.emit('join', roomId);
    // ⚠️ Socket never closed!
  }, [roomId]);

  return <MessageList messages={messages} />;
}

✅ Fixed with Cleanup:

function LiveChat({ roomId }) {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    const socket = io('https://chat.example.com');
    
    const handleMessage = (msg) => {
      setMessages(prev => [...prev, msg]);
    };

    socket.on('message', handleMessage);
    socket.emit('join', roomId);

    return () => {
      socket.off('message', handleMessage); // 🧹 Remove listener
      socket.disconnect(); // 🧹 Close connection
    };
  }, [roomId]);

  return <MessageList messages={messages} />;
}

5. Third-Party Libraries 📚

The Problem: Libraries that create instances (maps, charts, editors) often require manual cleanup.

✅ Pattern for Third-Party Cleanup:

function MapComponent({ center }) {
  const mapRef = useRef(null);
  const mapInstanceRef = useRef(null);

  useEffect(() => {
    // Initialize the map
    const map = new GoogleMap(mapRef.current, {
      center: center,
      zoom: 10
    });
    mapInstanceRef.current = map;

    return () => {
      // 🧹 Cleanup: destroy the map instance
      if (mapInstanceRef.current) {
        mapInstanceRef.current.destroy();
        mapInstanceRef.current = null;
      }
    };
  }, [center]);

  return <div ref={mapRef} style={{ width: '100%', height: '400px' }} />;
}

💡 Best Practice: Always check the library's documentation for cleanup methods (common names: destroy(), dispose(), cleanup(), unmount()).

Class Component Memory Leaks 🏛️

While hooks are more common in modern React, class components have their own patterns:

❌ Leaky Class Component:

class DataFetcher extends React.Component {
  state = { data: null };

  componentDidMount() {
    fetch('/api/data')
      .then(res => res.json())
      .then(data => this.setState({ data })); // ⚠️ Leak if unmounted!
  }

  render() {
    return <div>{this.state.data}</div>;
  }
}

✅ Fixed with componentWillUnmount:

class DataFetcher extends React.Component {
  state = { data: null };
  isMounted = false;

  componentDidMount() {
    this.isMounted = true;

    fetch('/api/data')
      .then(res => res.json())
      .then(data => {
        if (this.isMounted) {
          this.setState({ data });
        }
      });
  }

  componentWillUnmount() {
    this.isMounted = false; // 🧹 Cleanup flag
  }

  render() {
    return <div>{this.state.data}</div>;
  }
}

Advanced Patterns 🚀

Custom Hook for Safe Async

Create a reusable hook to prevent async memory leaks:

function useSafeAsync() {
  const isMountedRef = useRef(true);

  useEffect(() => {
    return () => {
      isMountedRef.current = false;
    };
  }, []);

  const safeSetState = useCallback((callback) => {
    if (isMountedRef.current) {
      callback();
    }
  }, []);

  return safeSetState;
}

// Usage
function MyComponent() {
  const [data, setData] = useState(null);
  const safeSetState = useSafeAsync();

  useEffect(() => {
    fetch('/api/data')
      .then(res => res.json())
      .then(result => {
        safeSetState(() => setData(result)); // ✅ Safe!
      });
  }, [safeSetState]);

  return <div>{data}</div>;
}

useRef for Mutable Values

useRef is perfect for storing values that shouldn't trigger re-renders but need to persist:

function VideoPlayer({ videoId }) {
  const playerRef = useRef(null);

  useEffect(() => {
    // Create player instance
    playerRef.current = new YouTubePlayer('player', {
      videoId: videoId
    });

    return () => {
      // 🧹 Cleanup: destroy player
      if (playerRef.current) {
        playerRef.current.destroy();
        playerRef.current = null;
      }
    };
  }, [videoId]);

  return <div id="player"></div>;
}

Debouncing and Throttling ⏱️

Debounced/throttled functions can cause leaks if not properly cleaned:

import { debounce } from 'lodash';

function SearchBox() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);

  useEffect(() => {
    const debouncedSearch = debounce(async (searchQuery) => {
      const data = await fetch(`/api/search?q=${searchQuery}`);
      const json = await data.json();
      setResults(json);
    }, 300);

    if (query) {
      debouncedSearch(query);
    }

    return () => {
      debouncedSearch.cancel(); // 🧹 Cancel pending debounced calls
    };
  }, [query]);

  return (
    <div>
      <input value={query} onChange={e => setQuery(e.target.value)} />
      <ResultsList results={results} />
    </div>
  );
}

Debugging Memory Leaks 🔧

Chrome DevTools Memory Profiler

┌─────────────────────────────────────────┐
│    MEMORY LEAK DEBUGGING PROCESS        │
├─────────────────────────────────────────┤
│                                         │
│  1️⃣  Open Chrome DevTools → Memory     │
│       ↓                                 │
│  2️⃣  Take Heap Snapshot (baseline)     │
│       ↓                                 │
│  3️⃣  Perform actions (navigate, etc.)  │
│       ↓                                 │
│  4️⃣  Take another Heap Snapshot        │
│       ↓                                 │
│  5️⃣  Compare snapshots                 │
│       ↓                                 │
│  6️⃣  Look for:                         │
│      • Detached DOM nodes              │
│      • Event listeners                 │
│      • Large arrays/objects            │
│                                         │
└─────────────────────────────────────────┘

Steps to Profile:

1. Record Heap Snapshot: Capture initial memory state
2. Perform Actions: Navigate between routes, trigger operations
3. Force Garbage Collection: Click the trash icon in DevTools
4. Take Second Snapshot: Capture new memory state
5. Compare: Look for objects that weren't garbage collected

React DevTools Profiler

The Profiler tab helps identify components that re-render unnecessarily, which can indicate memory issues:

import { Profiler } from 'react';

function onRenderCallback(id, phase, actualDuration) {
  console.log(`${id} (${phase}) took ${actualDuration}ms`);
}

function App() {
  return (
    <Profiler id="App" onRender={onRenderCallback}>
      <YourComponents />
    </Profiler>
  );
}

Why Did You Render Library

Install @welldone-software/why-did-you-render to detect unnecessary re-renders:

import React from 'react';

if (process.env.NODE_ENV === 'development') {
  const whyDidYouRender = require('@welldone-software/why-did-you-render');
  whyDidYouRender(React, {
    trackAllPureComponents: true,
  });
}

Console Warning Detection

Add this to catch state update warnings in development:

// In your main entry file
if (process.env.NODE_ENV === 'development') {
  const originalError = console.error;
  console.error = (...args) => {
    if (typeof args[0] === 'string' && args[0].includes('unmounted component')) {
      console.trace('Memory leak detected!'); // Shows stack trace
    }
    originalError(...args);
  };
}

Common Mistakes ⚠️

❌ Mistake 1: Forgetting to Return Cleanup Function

// Wrong - no cleanup
useEffect(() => {
  const timer = setInterval(() => console.log('tick'), 1000);
}, []);

// Right - cleanup included
useEffect(() => {
  const timer = setInterval(() => console.log('tick'), 1000);
  return () => clearInterval(timer);
}, []);

❌ Mistake 2: Cleanup Function Doesn't Mirror Setup

// Wrong - mismatched cleanup
useEffect(() => {
  window.addEventListener('resize', handleResize);
  return () => {
    window.removeEventListener('scroll', handleResize); // ❌ Wrong event!
  };
}, []);

// Right - exact mirror
useEffect(() => {
  window.addEventListener('resize', handleResize);
  return () => {
    window.removeEventListener('resize', handleResize); // ✅ Matches!
  };
}, []);

❌ Mistake 3: Creating New Function References

// Wrong - creates new function each render
useEffect(() => {
  window.addEventListener('scroll', () => console.log('scroll'));
  return () => {
    window.removeEventListener('scroll', () => console.log('scroll')); // ❌ Different function!
  };
}, []);

// Right - same function reference
useEffect(() => {
  const handleScroll = () => console.log('scroll');
  window.addEventListener('scroll', handleScroll);
  return () => {
    window.removeEventListener('scroll', handleScroll); // ✅ Same reference!
  };
}, []);

❌ Mistake 4: Not Cleaning Up All Resources

// Wrong - only cleans up one thing
useEffect(() => {
  const timer = setInterval(() => {}, 1000);
  const socket = io('ws://example.com');
  const listener = window.addEventListener('resize', handleResize);

  return () => {
    clearInterval(timer); // ❌ Forgot socket and listener!
  };
}, []);

// Right - cleans up everything
useEffect(() => {
  const timer = setInterval(() => {}, 1000);
  const socket = io('ws://example.com');
  const handleResize = () => {};
  window.addEventListener('resize', handleResize);

  return () => {
    clearInterval(timer); // ✅
    socket.disconnect(); // ✅
    window.removeEventListener('resize', handleResize); // ✅
  };
}, []);

❌ Mistake 5: Async Operations Without Cancellation

// Wrong - no cancellation
useEffect(() => {
  fetch('/api/data')
    .then(res => res.json())
    .then(data => setState(data)); // ⚠️ Runs even after unmount!
}, []);

// Right - with AbortController
useEffect(() => {
  const controller = new AbortController();
  
  fetch('/api/data', { signal: controller.signal })
    .then(res => res.json())
    .then(data => setState(data))
    .catch(err => {
      if (err.name !== 'AbortError') console.error(err);
    });

  return () => controller.abort();
}, []);

❌ Mistake 6: Conditional Cleanup

// Wrong - conditional cleanup creates inconsistency
useEffect(() => {
  const timer = setInterval(() => {}, 1000);

  if (someCondition) {
    return () => clearInterval(timer); // ❌ Only sometimes cleans up!
  }
}, [someCondition]);

// Right - always return cleanup
useEffect(() => {
  if (someCondition) {
    const timer = setInterval(() => {}, 1000);
    return () => clearInterval(timer); // ✅ Cleanup matches setup
  }
}, [someCondition]);

Prevention Checklist ✅

Use this checklist when writing effects:

• Does your effect create a subscription? → Add unsubscribe in cleanup
• Does it add event listeners? → Remove them in cleanup
• Does it start timers/intervals? → Clear them in cleanup
• Does it make async calls? → Use AbortController or isMounted flag
• Does it instantiate third-party libraries? → Call their cleanup methods
• Does the cleanup function mirror the setup exactly?
• Have you tested unmounting the component?
• Are you using the same function reference for add/remove?

Key Takeaways 🎯

1. Always clean up side effects - Every resource created in useEffect must be released in the cleanup function

2. Use AbortController for fetch - Modern browsers support request cancellation, use it

3. The cleanup function is your friend - Think of it as the "undo" for everything your effect does

4. Test component unmounting - Navigate away from components during development to catch leaks early

5. Watch for console warnings - React warns you about state updates on unmounted components

6. Profile regularly - Use Chrome DevTools Memory profiler to catch leaks before production

7. Same reference for listeners - Store event handler functions so you can remove the exact same reference

8. Custom hooks for reusability - Extract cleanup patterns into reusable hooks

9. Class components need componentWillUnmount - Clean up in this lifecycle method

10. Third-party libraries need manual cleanup - Always check documentation for cleanup methods

📚 Further Study

1. React Documentation - Effects with Cleanup: https://react.dev/learn/synchronizing-with-effects#how-to-handle-the-effect-firing-twice-in-development
2. Chrome DevTools Memory Profiling: https://developer.chrome.com/docs/devtools/memory-problems/
3. Fixing Memory Leaks in React (Article): https://kentcdodds.com/blog/fix-the-slow-render-before-you-fix-the-re-render

🎉 Congratulations! You now understand how to identify, prevent, and fix memory leaks in React applications. Practice implementing cleanup functions in your projects, and use profiling tools regularly to keep your apps performant!