Back to Developer Roadmap

Memory Leaks

src/data/question-groups/full-stack/content/memory-leaks.md

4.0861 B
Original Source

Memory leaks usually happen when unused resources (e.g., DOM elements, event listeners, or data structures) are not properly released, causing unnecessary memory consumption.

Common Solutions:

  1. Clean up event listeners: Remove listeners when components unmount:
javascript
useEffect(() => {
  window.addEventListener('resize', handler);
  return () => window.removeEventListener('resize', handler);
}, []);
  1. Abort fetch requests: Use AbortController to cancel pending API calls:
javascript
const controller = new AbortController();
fetch(url, { signal: controller.signal });
return () => controller.abort();
  1. Avoid stale references: Ensure state updates do not persist after unmounting by checking component state.

  2. Use profiling tools: Monitor and analyze memory usage using browser DevTools to detect leaks.