From 7df66c4c1b001d8260e6bdbeea7ac4f783679915 Mon Sep 17 00:00:00 2001 From: Neil <4138956+nwparker@users.noreply.github.com> Date: Sat, 30 May 2026 02:29:57 -0700 Subject: [PATCH] perf: reuse mounted ref in CLI setup panes --- .../components/settings/BrowserUsePane.tsx | 27 +++++++++---------- .../src/components/settings/CliSection.tsx | 27 +++++++++---------- .../settings/WslCliRegistration.tsx | 18 +++++-------- 3 files changed, 30 insertions(+), 42 deletions(-) diff --git a/src/renderer/src/components/settings/BrowserUsePane.tsx b/src/renderer/src/components/settings/BrowserUsePane.tsx index 53c85a0f98a..71b3cb154b3 100644 --- a/src/renderer/src/components/settings/BrowserUsePane.tsx +++ b/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(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 diff --git a/src/renderer/src/components/settings/CliSection.tsx b/src/renderer/src/components/settings/CliSection.tsx index a115120f902..dbb2881201b 100644 --- a/src/renderer/src/components/settings/CliSection.tsx +++ b/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 => { setLoading(true) @@ -100,7 +97,7 @@ export function CliSection({ currentPlatform }: CliSectionProps): React.JSX.Elem setLoading(false) } } - }, [handleStatusChange]) + }, [handleStatusChange, mountedRef]) useEffect(() => { void refreshStatus() diff --git a/src/renderer/src/components/settings/WslCliRegistration.tsx b/src/renderer/src/components/settings/WslCliRegistration.tsx index a05224ecc5c..de5992ce7d5 100644 --- a/src/renderer/src/components/settings/WslCliRegistration.tsx +++ b/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 => { + const refreshStatus = useCallback(async (): Promise => { 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