chore(deps): update dependency eslint-plugin-react-hooks to v7 (#1034)

* chore(deps): update dependency eslint-plugin-react-hooks to v7

* fix: react-hooks linter

* refactor: replace setTimouet with delay

* fix: group registry effect

* fix: initialize tools override

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Giuseppe Scuglia <peppescg@gmail.com>

Author: renovate[bot]

package.json

@@ -67,7 +67,7 @@
     "dotenv": "^17.0.0",
     "electron": "39.0.0",
     "eslint": "^9.25.0",
-    "eslint-plugin-react-hooks": "^6.0.0",
+    "eslint-plugin-react-hooks": "^7.0.0",
     "eslint-plugin-react-refresh": "^0.4.19",
     "globals": "^16.0.0",
     "husky": "^9.1.7",

pnpm-lock.yaml

@@ -12,7 +12,7 @@ import {
 } from '@/common/hooks/use-auto-launch'
 import { useTheme } from '@/common/hooks/use-theme'
 import { useMutation, useQuery } from '@tanstack/react-query'
-import { useState, useEffect } from 'react'
+import { useState } from 'react'
 import { Sun, Moon, Monitor } from 'lucide-react'
 import log from 'electron-log/renderer'
 import { trackEvent } from '@/common/lib/analytics'
@@ -138,14 +138,9 @@ function AutoLaunchField() {
 }
 
 function QuitConfirmationField() {
-  const [skipQuitConfirmation, setSkipQuitConfirmation] =
-    useState<boolean>(false)
-
-  useEffect(() => {
-    const quitConfirmationDisabled =
-      localStorage.getItem(CONFIRM_QUIT_STORAGE_KEY) === 'true'
-    setSkipQuitConfirmation(quitConfirmationDisabled)
-  }, [])
+  const [skipQuitConfirmation, setSkipQuitConfirmation] = useState<boolean>(
+    () => localStorage.getItem(CONFIRM_QUIT_STORAGE_KEY) === 'true'
+  )
 
   const handleQuitConfirmationToggle = () => {
     const newValue = !skipQuitConfirmation

renderer/src/common/components/settings/tabs/general-tab.tsx

@@ -71,7 +71,10 @@ const TooltipTrigger = React.forwardRef<
   const setRefs = React.useCallback(
     (node: HTMLButtonElement | null) => {
       // internal: keep track for truncation measurement
-      if (ctx) ctx.triggerRef.current = node
+      if (ctx) {
+        const triggerRef = ctx.triggerRef
+        triggerRef.current = node
+      }
       // forward to consumer
       if (typeof forwardedRef === 'function') {
         forwardedRef(node)

renderer/src/common/components/ui/tooltip.tsx

@@ -16,7 +16,7 @@ import { META_MCP_SERVER_NAME } from '../lib/constants'
  * Returns a function that polls server status and invalidates queries when ready.
  */
 export function useCheckServerStatus() {
-  const toastIdRef = useRef(new Date(Date.now()).toISOString())
+  const toastIdRef = useRef(new Date().getTime())
 
   const queryClient = useQueryClient()
 

renderer/src/common/hooks/use-check-server-status.tsx

@@ -95,13 +95,16 @@ export function useCleanupMetaOptimizer() {
     enabled: isMetaOptimizerEnabled,
   })
 
-  const removeClientsFromGroup = async (clients: string[]) => {
-    for (const clientType of clients) {
-      await unregisterClients({
-        clientType,
-      })
-    }
-  }
+  const removeClientsFromGroup = useCallback(
+    async (clients: string[]) => {
+      for (const clientType of clients) {
+        await unregisterClients({
+          clientType,
+        })
+      }
+    },
+    [unregisterClients]
+  )
 
   const mcpOptimizerGroup = groupsList?.groups?.find(
     (g) => g.name === MCP_OPTIMIZER_GROUP_NAME

renderer/src/common/hooks/use-cleanup-meta-optimizer.ts

@@ -55,7 +55,7 @@ function formatFeatureFlagDescription(key: string): React.ReactNode {
 }
 
 export function useExperimentalFeatures() {
-  const toastIdRef = useRef(new Date(Date.now()).toISOString())
+  const toastIdRef = useRef(new Date().getTime())
   const { handleCreateOptimizerGroup, isCreatingOptimizerGroup } =
     useCreateOptimizerGroup()
   const { cleanupMetaOptimizer } = useCleanupMetaOptimizer()

renderer/src/common/hooks/use-experimental-features.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useState } from 'react'
 import { X, AlertTriangle } from 'lucide-react'
 import {
   Alert,
@@ -14,16 +14,10 @@ interface ErrorAlertProps {
 }
 
 export function ErrorAlert({ error, className = '' }: ErrorAlertProps) {
-  const [isDismissed, setIsDismissed] = useState(false)
+  const [dismissedError, setDismissedError] = useState<string | null>(null)
 
-  // Reset dismissed state when a new error occurs
-  useEffect(() => {
-    if (error) {
-      setIsDismissed(false)
-    }
-  }, [error])
-
-  if (!error || isDismissed) {
+  // Show alert only if there's an error and it hasn't been dismissed
+  if (!error || error === dismissedError) {
     return null
   }
 
@@ -50,7 +44,7 @@ export function ErrorAlert({ error, className = '' }: ErrorAlertProps) {
           variant="ghost"
           size="sm"
           className="hover:bg-destructive/20 absolute top-2 right-2 h-6 w-6 p-0"
-          onClick={() => setIsDismissed(true)}
+          onClick={() => setDismissedError(error)}
         >
           <X className="h-3 w-3" />
           <span className="sr-only">Dismiss error</span>

renderer/src/features/chat/components/error-alert.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useState } from 'react'
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import {
   Dialog,
@@ -48,6 +48,9 @@ export function McpToolsModal({
 }: McpToolsModalProps) {
   const [searchQuery, setSearchQuery] = useState('')
   const [localEnabledTools, setLocalEnabledTools] = useState<string[]>([])
+  const [lastInitializedServer, setLastInitializedServer] = useState<
+    string | null
+  >(null)
   const queryClient = useQueryClient()
 
   // Fetch tools for the specific server
@@ -66,16 +69,14 @@ export function McpToolsModal({
     refetchOnMount: true, // Always refetch when component mounts
   })
 
-  // Initialize local state when data loads
-  useEffect(() => {
-    if (serverTools?.tools) {
-      const enabledTools = serverTools.tools
-        .filter((tool) => tool.enabled)
-        .map((tool) => tool.name)
-
-      setLocalEnabledTools(enabledTools)
-    }
-  }, [serverTools, serverName])
+  // Initialize local state when server or tools change
+  if (serverTools?.tools && lastInitializedServer !== serverName) {
+    const enabledTools = serverTools.tools
+      .filter((tool) => tool.enabled)
+      .map((tool) => tool.name)
+    setLocalEnabledTools(enabledTools)
+    setLastInitializedServer(serverName)
+  }
 
   // Save tools mutation
   const saveToolsMutation = useMutation({

renderer/src/features/chat/components/mcp-tools-modal.tsx

@@ -207,13 +207,7 @@ export function useChatSettings() {
         enabledTools: allEnabledTools,
       }
     }
-  }, [
-    selectedModel?.provider,
-    selectedModel?.model,
-    providerSettings,
-    enabledMcpTools,
-    enabledMcpServers,
-  ])
+  }, [selectedModel, providerSettings, enabledMcpTools, enabledMcpServers])
 
   // Mutation to update selected model
   const updateSelectedModelMutation = useMutation({
@@ -285,7 +279,7 @@ export function useChatSettings() {
         throw error
       }
     },
-    [selectedModel?.provider, selectedModel?.model, updateSelectedModelMutation]
+    [selectedModel, updateSelectedModelMutation]
   )
 
   // Update only enabled tools
@@ -316,7 +310,7 @@ export function useChatSettings() {
         throw error
       }
     },
-    [selectedModel?.provider, updateProviderSettingsMutation]
+    [selectedModel, updateProviderSettingsMutation]
   )
 
   // Load persisted settings for a provider