perf: reuse mounted ref in CLI setup panes

src/renderer/src/components/settings/BrowserUsePane.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable max-lines -- Why: Browser Use setup keeps enablement, CLI registration, skill install, cookie import, examples, and interaction tracking in one pane so the three-step setup state stays coherent. */
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { Import, Loader2, MousePointerClick } from 'lucide-react'
 import { toast } from 'sonner'
 import type { CliInstallStatus } from '../../../../shared/cli-install-types'
@@ -17,6 +17,7 @@ import {
   GLOBAL_AGENT_SKILL_SOURCE_KINDS,
   useInstalledAgentSkill
 } from '@/hooks/useInstalledAgentSkills'
+import { useMountedRef } from '@/hooks/useMountedRef'
 import { Button } from '../ui/button'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip'
 import {
@@ -58,20 +59,16 @@ export function BrowserUseSetup({
   const [cliStatus, setCliStatus] = useState<CliInstallStatus | null>(null)
   const [cliLoading, setCliLoading] = useState(true)
   const [cliBusy, setCliBusy] = useState(false)
-  const mountedRef = useRef(true)
+  const mountedRef = useMountedRef()
 
-  useEffect(() => {
-    mountedRef.current = true
-    return () => {
-      mountedRef.current = false
-    }
-  }, [])
-
-  const handleCliStatusChange = useCallback((nextStatus: CliInstallStatus): void => {
-    if (mountedRef.current) {
-      setCliStatus(nextStatus)
-    }
-  }, [])
+  const handleCliStatusChange = useCallback(
+    (nextStatus: CliInstallStatus): void => {
+      if (mountedRef.current) {
+        setCliStatus(nextStatus)
+      }
+    },
+    [mountedRef]
+  )
 
   // Why: the toggle gates only whether we show the setup instructions. We
   // persist it in localStorage instead of global settings because it has no
@@ -102,7 +99,7 @@ export function BrowserUseSetup({
         setCliLoading(false)
       }
     }
-  }, [handleCliStatusChange])
+  }, [handleCliStatusChange, mountedRef])
 
   useEffect(() => {
     // Why: skip IPC work when the feature is toggled off — the component

src/renderer/src/components/settings/CliSection.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { FolderOpen, RefreshCw } from 'lucide-react'
 import { toast } from 'sonner'
 import type { CliInstallStatus } from '../../../../shared/cli-install-types'
@@ -14,6 +14,7 @@ import {
   GLOBAL_AGENT_SKILL_SOURCE_KINDS,
   useInstalledAgentSkill
 } from '@/hooks/useInstalledAgentSkills'
+import { useMountedRef } from '@/hooks/useMountedRef'
 import { Button } from '../ui/button'
 import {
   Dialog,
@@ -64,7 +65,7 @@ export function CliSection({ currentPlatform }: CliSectionProps): React.JSX.Elem
   const [loading, setLoading] = useState(true)
   const [dialogOpen, setDialogOpen] = useState(false)
   const [busyAction, setBusyAction] = useState<'install' | 'remove' | null>(null)
-  const mountedRef = useRef(true)
+  const mountedRef = useMountedRef()
   const {
     installed: cliSkillDetected,
     loading: cliSkillLoading,
@@ -74,18 +75,14 @@ export function CliSection({ currentPlatform }: CliSectionProps): React.JSX.Elem
     sourceKinds: GLOBAL_AGENT_SKILL_SOURCE_KINDS
   })
 
-  useEffect(() => {
-    mountedRef.current = true
-    return () => {
-      mountedRef.current = false
-    }
-  }, [])
-
-  const handleStatusChange = useCallback((nextStatus: CliInstallStatus): void => {
-    if (mountedRef.current) {
-      setStatus(nextStatus)
-    }
-  }, [])
+  const handleStatusChange = useCallback(
+    (nextStatus: CliInstallStatus): void => {
+      if (mountedRef.current) {
+        setStatus(nextStatus)
+      }
+    },
+    [mountedRef]
+  )
 
   const refreshStatus = useCallback(async (): Promise<void> => {
     setLoading(true)
@@ -100,7 +97,7 @@ export function CliSection({ currentPlatform }: CliSectionProps): React.JSX.Elem
         setLoading(false)
       }
     }
-  }, [handleStatusChange])
+  }, [handleStatusChange, mountedRef])
 
   useEffect(() => {
     void refreshStatus()

src/renderer/src/components/settings/WslCliRegistration.tsx

@@ -1,8 +1,9 @@
-import { useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { RefreshCw } from 'lucide-react'
 import { toast } from 'sonner'
 import type { CliInstallStatus } from '../../../../shared/cli-install-types'
 import { useWindowsTerminalCapabilities } from '@/lib/windows-terminal-capabilities'
+import { useMountedRef } from '@/hooks/useMountedRef'
 import { Button } from '../ui/button'
 import {
   Dialog,
@@ -26,18 +27,11 @@ export function WslCliRegistration({
   const [loading, setLoading] = useState(false)
   const [dialogOpen, setDialogOpen] = useState(false)
   const [busyAction, setBusyAction] = useState<'install' | 'remove' | null>(null)
-  const mountedRef = useRef(true)
+  const mountedRef = useMountedRef()
   const { wslAvailable } = useWindowsTerminalCapabilities(currentPlatform === 'win32')
   const showWslCli = currentPlatform === 'win32' && wslAvailable
 
-  useEffect(() => {
-    mountedRef.current = true
-    return () => {
-      mountedRef.current = false
-    }
-  }, [])
-
-  const refreshStatus = async (): Promise<void> => {
+  const refreshStatus = useCallback(async (): Promise<void> => {
     setLoading(true)
     try {
       const next = await window.api.cli.getWslInstallStatus()
@@ -53,13 +47,13 @@ export function WslCliRegistration({
         setLoading(false)
       }
     }
-  }
+  }, [mountedRef])
 
   useEffect(() => {
     if (showWslCli) {
       void refreshStatus()
     }
-  }, [showWslCli])
+  }, [refreshStatus, showWslCli])
 
   if (!showWslCli) {
     return null