Detecting & Fixing Memory Leaks — Find and eliminate memory leaks that degrade performance over time

// The core pattern: every useEffect that allocates must clean up
useEffect(() => {
  // ALLOCATE: subscription, listener, timer, fetch
  const controller = new AbortController();
  const intervalId = setInterval(pollData, 5000);
  window.addEventListener("resize", handleResize);
  fetchData({ signal: controller.signal });
 
  // CLEANUP: runs on unmount and before re-running effect
  return () => {
    controller.abort();
    clearInterval(intervalId);
    window.removeEventListener("resize", handleResize);
  };
}, []);

// ---- BEFORE: Component with 5 memory leaks ----
 
function LiveDashboard({ userId }: { userId: string }) {
  const [data, setData] = useState<DashboardData | null>(null);
  const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
  const [notifications, setNotifications] = useState<string[]>([]);
  const chartRef = useRef<HTMLCanvasElement>(null);
 
  // LEAK 1: Fetch without abort — updates state after unmount
  useEffect(() => {
    async function loadData() {
      const res = await fetch(`/api/dashboard/${userId}`);
      const json = await res.json();
      setData(json); // May run after unmount!
    }
    loadData();
  }, [userId]);
 
  // LEAK 2: Interval never cleared — keeps running after unmount
  useEffect(() => {
    setInterval(async () => {
      const res = await fetch(`/api/dashboard/${userId}/live`);
      const json = await res.json();
      setData(json); // Runs forever, even after navigating away
    }, 5000);
  }, [userId]);
 
  // LEAK 3: Event listener never removed
  useEffect(() => {
    window.addEventListener("mousemove", (e) => {
      setMousePos({ x: e.clientX, y: e.clientY });
    });
  }, []);
 
  // LEAK 4: WebSocket never closed
  useEffect(() => {
    const ws = new WebSocket(`wss://api.example.com/ws/${userId}`);
    ws.onmessage = (event) => {
      setNotifications((prev) => [...prev, event.data]);
    };
    // No cleanup — WebSocket stays open
  }, [userId]);
 
  // LEAK 5: Canvas context and large data retained via closure
  useEffect(() => {
    const ctx = chartRef.current?.getContext("2d");
    const hugeDataSet = new Float64Array(1_000_000); // 8MB allocation
    function drawChart() {
      // Closure retains hugeDataSet even after component unmounts
      ctx?.clearRect(0, 0, 800, 400);
      // ... draw using hugeDataSet
    }
    drawChart();
    // hugeDataSet is never released because drawChart retains a reference
  }, [data]);
 
  return (
    <div>
      <canvas ref={chartRef} width={800} height={400} />
      <p>Mouse: {mousePos.x}, {mousePos.y}</p>
      <ul>
        {notifications.map((n, i) => (
          <li key={i}>{n}</li>
        ))}
      </ul>
    </div>
  );
}
 
// ---- AFTER: All 5 leaks fixed — proper cleanup on every effect ----
 
function LiveDashboard({ userId }: { userId: string }) {
  const [data, setData] = useState<DashboardData | null>(null);
  const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
  const [notifications, setNotifications] = useState<string[]>([]);
  const chartRef = useRef<HTMLCanvasElement>(null);
 
  // FIX 1: AbortController cancels fetch on unmount or userId change
  useEffect(() => {
    const controller = new AbortController();
 
    async function loadData() {
      try {
        const res = await fetch(`/api/dashboard/${userId}`, {
          signal: controller.signal,
        });
        const json = await res.json();
        setData(json);
      } catch (err) {
        if (err instanceof DOMException && err.name === "AbortError") {
          // Expected when component unmounts — not an error
          return;
        }
        throw err;
      }
    }
    loadData();
 
    return () => controller.abort();
  }, [userId]);
 
  // FIX 2: Interval cleared on unmount, AbortController for each poll
  useEffect(() => {
    const controller = new AbortController();
 
    const intervalId = setInterval(async () => {
      try {
        const res = await fetch(`/api/dashboard/${userId}/live`, {
          signal: controller.signal,
        });
        const json = await res.json();
        setData(json);
      } catch (err) {
        if (err instanceof DOMException && err.name === "AbortError") return;
        console.error("Poll failed:", err);
      }
    }, 5000);
 
    return () => {
      clearInterval(intervalId);
      controller.abort();
    };
  }, [userId]);
 
  // FIX 3: Named handler + removeEventListener on cleanup
  useEffect(() => {
    const handleMouseMove = (e: MouseEvent) => {
      setMousePos({ x: e.clientX, y: e.clientY });
    };
 
    window.addEventListener("mousemove", handleMouseMove);
    return () => window.removeEventListener("mousemove", handleMouseMove);
  }, []);
 
  // FIX 4: WebSocket closed on cleanup
  useEffect(() => {
    const ws = new WebSocket(`wss://api.example.com/ws/${userId}`);
 
    ws.onmessage = (event) => {
      setNotifications((prev) => [...prev, event.data]);
    };
 
    ws.onerror = (error) => {
      console.error("WebSocket error:", error);
    };
 
    return () => {
      ws.close();
    };
  }, [userId]);
 
  // FIX 5: Cleanup nullifies large data, uses ref for mutable binding
  useEffect(() => {
    const ctx = chartRef.current?.getContext("2d");
    let hugeDataSet: Float64Array | null = new Float64Array(1_000_000);
 
    function drawChart() {
      if (!hugeDataSet || !ctx) return;
      ctx.clearRect(0, 0, 800, 400);
      // ... draw using hugeDataSet
    }
    drawChart();
 
    return () => {
      hugeDataSet = null; // Release 8MB — allows garbage collection
    };
  }, [data]);
 
  return (
    <div>
      <canvas ref={chartRef} width={800} height={400} />
      <p>Mouse: {mousePos.x}, {mousePos.y}</p>
      <ul>
        {notifications.map((n, i) => (
          <li key={i}>{n}</li>
        ))}
      </ul>
    </div>
  );
}

useEffect(() => {
  const controller = new AbortController();
 
  async function loadAll() {
    const [users, orders, metrics] = await Promise.all([
      fetch("/api/users", { signal: controller.signal }),
      fetch("/api/orders", { signal: controller.signal }),
      fetch("/api/metrics", { signal: controller.signal }),
    ]);
    // One abort cancels all three
    setData({
      users: await users.json(),
      orders: await orders.json(),
      metrics: await metrics.json(),
    });
  }
  loadAll().catch((err) => {
    if (err.name !== "AbortError") throw err;
  });
 
  return () => controller.abort();
}, []);

// Advanced: WeakRef allows garbage collection of the referenced object
function useWeakCallback<T extends object>(target: T, callback: (target: T) => void) {
  const weakRef = useRef(new WeakRef(target));
 
  useEffect(() => {
    const intervalId = setInterval(() => {
      const obj = weakRef.current.deref();
      if (obj) {
        callback(obj);
      } else {
        // Object was garbage collected — stop polling
        clearInterval(intervalId);
      }
    }, 1000);
 
    return () => clearInterval(intervalId);
  }, [callback]);
}