Fix memory leaks in dashboard components

components/dashboard/ExportDataDialog.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect, useRef } from "react";
 import { Download, FileText, Braces, CheckCircle2, Layers } from "lucide-react";
 import {
   Dialog,
@@ -69,9 +69,19 @@ export function ExportDataDialog({
 }: ExportDataDialogProps): React.JSX.Element {
   const [selectedFormat, setSelectedFormat] = useState<ExportFormat>("csv");
   const [isExporting, setIsExporting] = useState(false);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const isLargeExport = events.length >= STREAM_THRESHOLD;
 
+  // Cleanup timeout on unmount to prevent memory leaks
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
   async function handleExport(): Promise<void> {
     setIsExporting(true);
 
@@ -107,9 +117,15 @@ export function ExportDataDialog({
         }
       }
     } finally {
-      setTimeout(function () {
+      // Clear any existing timeout to prevent memory leaks
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+
+      timeoutRef.current = setTimeout(function () {
         setIsExporting(false);
         onOpenChange(false);
+        timeoutRef.current = null;
       }, 400);
     }
   }

components/dashboard/RawDataDialog.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Code, ExternalLink, Copy, Check } from "lucide-react";
-import React, { useState } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import {
   Dialog,
   DialogContent,
@@ -31,14 +31,33 @@ interface RawDataDialogProps {
 function CopyButton({ text }: { text: string }): React.JSX.Element {
   const [copied, setCopied] = useState(false);
   const { toast } = useToast();
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   async function handleCopy(): Promise<void> {
     await navigator.clipboard.writeText(text);
     setCopied(true);
     toast({ description: "Copied!" });
-    setTimeout(() => setCopied(false), 2000);
+
+    // Clear any existing timeout to prevent memory leaks
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+
+    timeoutRef.current = setTimeout(() => {
+      setCopied(false);
+      timeoutRef.current = null;
+    }, 2000);
   }
 
+  // Cleanup timeout on unmount
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
   return (
     <TooltipProvider>
       <Tooltip>

components/dashboard/SecurityMetricsDashboard.tsx

@@ -47,11 +47,11 @@ export function SecurityMetricsDashboard() {
   const fetchMetrics = async () => {
     try {
       const response = await fetch("/api/security/metrics");
-      
+
       if (!response.ok) {
         throw new Error(`HTTP ${response.status}`);
       }
-      
+
       const data = await response.json();
       setMetrics(data);
       setError(null);
@@ -64,10 +64,11 @@ export function SecurityMetricsDashboard() {
 
   useEffect(() => {
     fetchMetrics();
-    
+
     // Refresh every 10 seconds
     const interval = setInterval(fetchMetrics, 10000);
-
+
+    // Cleanup interval on unmount to prevent memory leaks
     return () => clearInterval(interval);
   }, []);
 

lib/hooks/useLiveFeed.ts

@@ -58,6 +58,7 @@ export function useLiveFeed(onEvent: (event: TranslatedEvent) => void): LiveFeed
   const pauseBufferRef = useRef<TranslatedEvent[]>([]);
   const isPausedRef = useRef(false);
   const onEventRef = useRef(onEvent);
+  const timeoutIdsRef = useRef<Set<ReturnType<typeof setTimeout>>>(new Set());
   onEventRef.current = onEvent;
 
   // Tracks the current reconnection attempt count. Reset to 0 on a successful
@@ -136,7 +137,9 @@ export function useLiveFeed(onEvent: (event: TranslatedEvent) => void): LiveFeed
           next.delete(event.raw.id);
           return next;
         });
+        timeoutIdsRef.current.delete(timeoutId);
       }, 600);
+      timeoutIdsRef.current.add(timeoutId);
     };
 
     ws.onclose = () => {
@@ -197,13 +200,15 @@ export function useLiveFeed(onEvent: (event: TranslatedEvent) => void): LiveFeed
         for (const event of buffered) {
           onEventRef.current(event);
           setNewEventIds((ids) => new Set(ids).add(event.raw.id));
-          setTimeout(() => {
+          const timeoutId = setTimeout(() => {
             setNewEventIds((ids) => {
               const next = new Set(ids);
               next.delete(event.raw.id);
               return next;
             });
+            timeoutIdsRef.current.delete(timeoutId);
           }, 600);
+          timeoutIdsRef.current.add(timeoutId);
         }
       }