ReactJs Performance ~ Memory Leak Prevention ~

Memory leaks gradually reduce the responsiveness of React applications. At first everything feels normal, but after extended usage — around 10 to 15 minutes — the UI may start lagging, animations become choppy, and in severe cases the application can freeze or crash completely.

Frequent Causes of Memory Leaks in React

1. Timers and intervals that are never cleared

// ❌ Risky: interval continues even after component removal
function AutoCounter() {
  const [value, setValue] = useState(0);

  useEffect(() => {
    window.setInterval(() => {
      setValue((previous) => previous + 1);
    }, 1000);

    // No interval cleanup
  }, []);

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

// ✅ Better: clear interval during unmount
function ManagedAutoCounter() {
  const [value, setValue] = useState(0);

  useEffect(() => {
    const timer = window.setInterval(() => {
      setValue((previous) => previous + 1);
    }, 1000);

    return () => {
      window.clearInterval(timer);
    };
  }, []);

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

2. Event handlers that remain attached:

// ❌ Incorrect: listener remains active after unmount
function ResponsiveLayout() {
  useEffect(() => {
    window.addEventListener('resize', updateViewportSize);

    // Cleanup is missing
  }, []);

  return <div>Responsive page</div>;
}

// ✅ Correct: unregister listener during cleanup
function SafeResponsiveLayout() {
  useEffect(() => {
    window.addEventListener('resize', updateViewportSize);

    return () => {
      window.removeEventListener('resize', updateViewportSize);
    };
  }, []);

  return <div>Responsive page</div>;
}

3. WebSocket sessions left active:

// ❌ Problematic: socket connection is never terminated
function RealtimeFeed() {
  useEffect(() => {
    const socket = new WebSocket('wss://stream.example.dev');

    socket.onmessage = receiveLiveUpdate;

    // No cleanup logic
  }, []);

  return <div>Streaming updates...</div>;
}

// ✅ Safer approach: disconnect on component cleanup
function StableRealtimeFeed() {
  useEffect(() => {
    const socket = new WebSocket('wss://stream.example.dev');

    socket.onmessage = receiveLiveUpdate;

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

  return <div>Streaming updates...</div>;
}

4. Retaining references to heavy data objects:

// ❌ Inefficient: keeps heavy data in memory
function InefficientComponent({ dataset }) {
  const cacheRef = useRef(null);

  useEffect(() => {
    // Stores transformed data without cleanup
    cacheRef.current = transformDataset(dataset);
  }, [dataset]);

  return <div>Data ready</div>;
}

// ✅ Improved: clears unused references properly
function OptimizedComponent({ dataset }) {
  const cacheRef = useRef(null);

  useEffect(() => {
    cacheRef.current = transformDataset(dataset);

    return () => {
      // Remove retained reference during cleanup
      cacheRef.current = undefined;
    };
  }, [dataset]);

  return <div>Data ready</div>;
}

Memory Leak Detection Checklist

Leak Category	Detection Technique	Severity	Estimated Fix Time	Fix Difficulty
Unremoved event listeners	Inspect with memory profiling tools	High	5–10 minutes	Low
Uncleared timers or intervals	Check console warnings and logs	High	2–5 minutes	Low
Persistent WebSocket connections	Monitor through the Network panel	High	10–20 minutes	Low
Retained large object references	Compare heap snapshots	Medium	15–30 minutes	Medium
Unintended closure retention	Analyze heap snapshots	Medium	20–40 minutes	High
Lingering DOM node references	Track using memory profiler	Low	30–60 minutes	Low

// Enable only during local development
if (process.env.NODE_ENV === 'development') {
  useEffect(() => {
    const monitorHeapUsage = () => {
      if (!performance.memory) return;

      const heapSizeInMB =
        performance.memory.usedJSHeapSize / (1024 * 1024);

      console.log(
        `[Heap Monitor] Current usage: ${heapSizeInMB.toFixed(2)} MB`
      );

      // Warn when memory consumption becomes unusually high
      if (heapSizeInMB >= 200) {
        console.warn(
          '[Heap Monitor] Potential memory leak detected.'
        );
      }
    };

    // Run memory inspection every 5 seconds
    const timerId = window.setInterval(monitorHeapUsage, 5000);

    return () => {
      window.clearInterval(timerId);
    };
  }, []);
}

Chrome DevTools provides a Memory profiling tool that helps identify memory leaks through heap snapshots and allocation tracking. A common workflow is to capture one snapshot before a user action and another afterward, then compare the results to detect objects that remain unexpectedly in memory.

If certain objects continue to exist even though they are no longer needed and should have been garbage collected, this usually suggests a memory retention issue or leak.