perf: move file search cleanup to root ref (#4163)

src/renderer/src/components/right-sidebar/Search.tsx

@@ -47,6 +47,8 @@ export default function Search(): React.JSX.Element {
   const revealRafRef = useRef<number | null>(null)
   const revealInnerRafRef = useRef<number | null>(null)
   const seededInputSelectionRafRef = useRef<number | null>(null)
+  const cleanupSearchPanelRef = useRef<() => void>(() => {})
+  const previousCleanupSearchPanelRef = useRef<(() => void) | null>(null)
   const includeInputRef = useRef<HTMLInputElement>(null)
   const excludeInputRef = useRef<HTMLInputElement>(null)
 
@@ -115,16 +117,32 @@ export default function Search(): React.JSX.Element {
     }
   }, [])
 
-  // Cleanup debounce timer on unmount
-  useEffect(() => {
-    return () => {
-      cancelPendingSearch()
-      cancelSeededInputSelectionFrame()
-      cancelRevealFrame(revealRafRef)
-      cancelRevealFrame(revealInnerRafRef)
-    }
+  const cleanupCurrentSearchPanel = useCallback(() => {
+    cancelPendingSearch()
+    cancelSeededInputSelectionFrame()
+    cancelRevealFrame(revealRafRef)
+    cancelRevealFrame(revealInnerRafRef)
   }, [cancelPendingSearch, cancelSeededInputSelectionFrame])
 
+  cleanupSearchPanelRef.current = cleanupCurrentSearchPanel
+
+  useEffect(() => {
+    const previousCleanup = previousCleanupSearchPanelRef.current
+    previousCleanupSearchPanelRef.current = cleanupCurrentSearchPanel
+    if (previousCleanup && previousCleanup !== cleanupCurrentSearchPanel) {
+      previousCleanup()
+    }
+  }, [cleanupCurrentSearchPanel])
+
+  const setSearchPanelRef = useCallback((node: HTMLDivElement | null): void => {
+    if (node !== null) {
+      return
+    }
+    // Why: debounce, seeded focus, and reveal frames are scoped to this panel
+    // owner; clearing them from a stable root ref avoids a cleanup-only Effect.
+    cleanupSearchPanelRef.current()
+  }, [])
+
   useEffect(() => {
     if (!worktreePath) {
       cancelPendingSearch()
@@ -326,7 +344,7 @@ export default function Search(): React.JSX.Element {
   }
 
   return (
-    <div className="flex flex-col h-full">
+    <div ref={setSearchPanelRef} className="flex flex-col h-full">
       <SearchHeader
         inputRef={setSearchInputRef}
         includeInputRef={includeInputRef}