diff --git a/src/renderer/src/components/status-bar/SshStatusSegment.tsx b/src/renderer/src/components/status-bar/SshStatusSegment.tsx index f593083783c..ae083093ae1 100644 --- a/src/renderer/src/components/status-bar/SshStatusSegment.tsx +++ b/src/renderer/src/components/status-bar/SshStatusSegment.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect, useRef, useState } from 'react' +import React, { useCallback, useState } from 'react' import { AlertTriangle, Cloud, Loader2, MonitorSmartphone, Server, ServerOff } from 'lucide-react' import { toast } from 'sonner' import { @@ -8,6 +8,7 @@ import { DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu' +import { useMountedRef } from '@/hooks/useMountedRef' import { useAppStore } from '../../store' import { STATUS_LABELS, statusColor } from '../settings/SshTargetCard' import type { SshConnectionStatus } from '../../../../shared/ssh-types' @@ -113,16 +114,9 @@ function TargetRow({ syncStatus: RemoteWorkspaceSyncStatus | undefined }): React.JSX.Element { const [busy, setBusy] = useState(false) - const mountedRef = useRef(true) + const mountedRef = useMountedRef() const recordFeatureInteraction = useAppStore((s) => s.recordFeatureInteraction) - useEffect(() => { - mountedRef.current = true - return () => { - mountedRef.current = false - } - }, []) - const handleConnect = useCallback(async () => { setBusy(true) try { @@ -135,7 +129,7 @@ function TargetRow({ setBusy(false) } } - }, [recordFeatureInteraction, targetId]) + }, [mountedRef, recordFeatureInteraction, targetId]) const handleDisconnect = useCallback(async () => { setBusy(true) @@ -149,7 +143,7 @@ function TargetRow({ setBusy(false) } } - }, [recordFeatureInteraction, targetId]) + }, [mountedRef, recordFeatureInteraction, targetId]) return (