fix: clean up timeout in PlanSidebar to prevent memory leaks

hobostay · hobostay · commit 5388f043f684 · 2026-03-12T11:56:29.000+08:00
The copy timeout was not being cleared when the component unmounted or when the copy button was clicked multiple times, potentially causing memory leaks and incorrect UI state. Refs #792
diff --git a/apps/web/src/components/PlanSidebar.tsx b/apps/web/src/components/PlanSidebar.tsx
@@ -1,4 +1,4 @@
-import { memo, useState, useCallback } from "react";
+import { memo, useState, useCallback, useRef, useEffect } from "react";
 import { Badge } from "./ui/badge";
 import { Button } from "./ui/button";
 import { ScrollArea } from "./ui/scroll-area";
@@ -66,6 +66,7 @@ const PlanSidebar = memo(function PlanSidebar({
   const [proposedPlanExpanded, setProposedPlanExpanded] = useState(false);
   const [isSavingToWorkspace, setIsSavingToWorkspace] = useState(false);
   const [copied, setCopied] = useState(false);
+  const copiedTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const planMarkdown = activeProposedPlan?.planMarkdown ?? null;
   const displayedPlanMarkdown = planMarkdown ? stripDisplayedPlanMarkdown(planMarkdown) : null;
@@ -74,8 +75,15 @@ const PlanSidebar = memo(function PlanSidebar({
   const handleCopyPlan = useCallback(() => {
     if (!planMarkdown) return;
     void navigator.clipboard.writeText(planMarkdown);
+    if (copiedTimerRef.current != null) {
+      clearTimeout(copiedTimerRef.current);
+    }
+
     setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
+    copiedTimerRef.current = setTimeout(() => {
+      setCopied(false);
+      copiedTimerRef.current = null;
+    }, 2000);
   }, [planMarkdown]);
 
   const handleDownload = useCallback(() => {
@@ -120,6 +128,14 @@ const PlanSidebar = memo(function PlanSidebar({
       {/* Header */}
       <div className="flex h-12 shrink-0 items-center justify-between border-b border-border/60 px-3">
         <div className="flex items-center gap-2">
+  // Cleanup timeout on unmount
+  useEffect(() => {
+    return () => {
+      if (copiedTimerRef.current \!= null) {
+        clearTimeout(copiedTimerRef.current);
+      }
+    };
+  }, []);
           <Badge
             variant="secondary"
             className="rounded-md bg-blue-500/10 px-1.5 py-0 text-[10px] font-semibold tracking-wide text-blue-400 uppercase"
