chore(mcp): drop unobserved useCallback/useMemo, simplify state

- mcp.tsx: drop 8 useCallback wrappers (no React.memo'd children, no effect/memo deps observe them)
- mcp.tsx: drop filteredServers useMemo (cheap O(n) filter, no memoized consumers)
- mcp.tsx: serverToDelete {id, name} → serverToDeleteId; derive name from servers cache
- mcp-server-form-modal.tsx: drop 8 useCallback wrappers (same rationale)
- mcp-server-form-modal.tsx: drop hasChanges useMemo — deps change every keystroke so memo never caches
- mcp-server-form-modal.tsx: hover: → hover-hover: for codebase pointer:fine consistency

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/mcp-server-form-modal/mcp-server-form-modal.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { toError } from '@sim/utils/errors'
 import { ChevronDown, ChevronRight } from 'lucide-react'
@@ -361,72 +361,66 @@ export function McpServerFormModal({
     }
   }, [open, clearTestResult])
 
-  const resetEnvVarState = useCallback(() => {
+  const resetEnvVarState = () => {
     setShowEnvVars(false)
     setActiveInputField(null)
     setActiveHeaderIndex(null)
-  }, [])
-
-  const handleInputChange = useCallback(
-    (field: InputFieldType, value: string, headerIndex?: number) => {
-      const input = document.activeElement as HTMLInputElement
-      const pos = input?.selectionStart || 0
-      setCursorPosition(pos)
-
-      if (testResult) clearTestResult()
-      if (submitError) setSubmitError(null)
-
-      const envVarTrigger = checkEnvVarTrigger(value, pos)
-      setShowEnvVars(envVarTrigger.show)
-      setEnvSearchTerm(envVarTrigger.show ? envVarTrigger.searchTerm : '')
-
-      if (envVarTrigger.show) {
-        setActiveInputField(field)
-        setActiveHeaderIndex(headerIndex ?? null)
-      } else {
-        resetEnvVarState()
-      }
+  }
 
-      if (field === 'url') {
-        setFormData((prev) => ({ ...prev, url: value }))
-      } else if (headerIndex !== undefined) {
-        const headerField = field === 'header-key' ? 'key' : 'value'
-        setFormData((prev) => ({
-          ...prev,
-          headers: updateHeadersArray(prev.headers || [], headerIndex, headerField, value),
-        }))
-      }
-    },
-    [testResult, clearTestResult, submitError, resetEnvVarState]
-  )
+  const handleInputChange = (field: InputFieldType, value: string, headerIndex?: number) => {
+    const input = document.activeElement as HTMLInputElement
+    const pos = input?.selectionStart || 0
+    setCursorPosition(pos)
 
-  const handleEnvVarSelect = useCallback(
-    (newValue: string) => {
-      if (activeInputField === 'url') {
-        setFormData((prev) => ({ ...prev, url: newValue }))
-      } else if (activeHeaderIndex !== null) {
-        const field = activeInputField === 'header-key' ? 'key' : 'value'
-        const processedValue = field === 'key' ? newValue.replace(/[{}]/g, '') : newValue
-        setFormData((prev) => ({
-          ...prev,
-          headers: updateHeadersArray(prev.headers || [], activeHeaderIndex, field, processedValue),
-        }))
-      }
+    if (testResult) clearTestResult()
+    if (submitError) setSubmitError(null)
+
+    const envVarTrigger = checkEnvVarTrigger(value, pos)
+    setShowEnvVars(envVarTrigger.show)
+    setEnvSearchTerm(envVarTrigger.show ? envVarTrigger.searchTerm : '')
+
+    if (envVarTrigger.show) {
+      setActiveInputField(field)
+      setActiveHeaderIndex(headerIndex ?? null)
+    } else {
       resetEnvVarState()
-    },
-    [activeInputField, activeHeaderIndex, resetEnvVarState]
-  )
+    }
 
-  const handleHeaderScroll = useCallback((key: string, sl: number) => {
+    if (field === 'url') {
+      setFormData((prev) => ({ ...prev, url: value }))
+    } else if (headerIndex !== undefined) {
+      const headerField = field === 'header-key' ? 'key' : 'value'
+      setFormData((prev) => ({
+        ...prev,
+        headers: updateHeadersArray(prev.headers || [], headerIndex, headerField, value),
+      }))
+    }
+  }
+
+  const handleEnvVarSelect = (newValue: string) => {
+    if (activeInputField === 'url') {
+      setFormData((prev) => ({ ...prev, url: newValue }))
+    } else if (activeHeaderIndex !== null) {
+      const field = activeInputField === 'header-key' ? 'key' : 'value'
+      const processedValue = field === 'key' ? newValue.replace(/[{}]/g, '') : newValue
+      setFormData((prev) => ({
+        ...prev,
+        headers: updateHeadersArray(prev.headers || [], activeHeaderIndex, field, processedValue),
+      }))
+    }
+    resetEnvVarState()
+  }
+
+  const handleHeaderScroll = (key: string, sl: number) => {
     setHeaderScrollLeft((prev) => ({ ...prev, [key]: sl }))
-  }, [])
+  }
 
   const isDomainBlocked =
     !!formData.url?.trim() && !isDomainAllowed(formData.url, allowedMcpDomains)
   const isFormValid = !!(formData.name.trim() && formData.url?.trim())
   const testButtonLabel = getTestButtonLabel(testResult, isTestingConnection)
 
-  const hasChanges = useMemo(() => {
+  const computeHasChanges = (): boolean => {
     if (mode === 'add') return true
     if (formData.name !== originalData.name) return true
     if (formData.url !== originalData.url) return true
@@ -444,49 +438,49 @@ export function McpServerFormModal({
         return true
     }
     return false
-  }, [mode, formData, originalData, oauthClientSecretTouched])
-
-  const parseJsonConfig = useCallback(
-    (json: string): { name: string; url: string; headers: Record<string, string> } | null => {
-      try {
-        const parsed = JSON.parse(json)
-
-        if (parsed.mcpServers && typeof parsed.mcpServers === 'object') {
-          const entries = Object.entries(parsed.mcpServers)
-          if (entries.length === 0) {
-            setJsonError('No servers found in mcpServers')
-            return null
-          }
-          if (entries.length > 1) {
-            setJsonError(
-              `Only the first server ("${entries[0][0]}") will be imported. Paste each config separately to add others.`
-            )
-          }
-          const [name, config] = entries[0] as [string, Record<string, unknown>]
-          if (!config.url || typeof config.url !== 'string') {
-            setJsonError('Server config must include a "url" field')
-            return null
-          }
-          if (entries.length <= 1) setJsonError(null)
-          return { name, url: config.url, headers: extractStringHeaders(config.headers) }
-        }
+  }
+  const hasChanges = computeHasChanges()
+
+  const parseJsonConfig = (
+    json: string
+  ): { name: string; url: string; headers: Record<string, string> } | null => {
+    try {
+      const parsed = JSON.parse(json)
 
-        if (parsed.url && typeof parsed.url === 'string') {
-          setJsonError(null)
-          return { name: '', url: parsed.url, headers: extractStringHeaders(parsed.headers) }
+      if (parsed.mcpServers && typeof parsed.mcpServers === 'object') {
+        const entries = Object.entries(parsed.mcpServers)
+        if (entries.length === 0) {
+          setJsonError('No servers found in mcpServers')
+          return null
+        }
+        if (entries.length > 1) {
+          setJsonError(
+            `Only the first server ("${entries[0][0]}") will be imported. Paste each config separately to add others.`
+          )
         }
+        const [name, config] = entries[0] as [string, Record<string, unknown>]
+        if (!config.url || typeof config.url !== 'string') {
+          setJsonError('Server config must include a "url" field')
+          return null
+        }
+        if (entries.length <= 1) setJsonError(null)
+        return { name, url: config.url, headers: extractStringHeaders(config.headers) }
+      }
 
-        setJsonError('JSON must contain "mcpServers" or a "url" field')
-        return null
-      } catch {
-        setJsonError('Invalid JSON')
-        return null
+      if (parsed.url && typeof parsed.url === 'string') {
+        setJsonError(null)
+        return { name: '', url: parsed.url, headers: extractStringHeaders(parsed.headers) }
       }
-    },
-    []
-  )
 
-  const handleTestConnection = useCallback(async () => {
+      setJsonError('JSON must contain "mcpServers" or a "url" field')
+      return null
+    } catch {
+      setJsonError('Invalid JSON')
+      return null
+    }
+  }
+
+  const handleTestConnection = async () => {
     if (!isFormValid) return
 
     await testConnection({
@@ -497,9 +491,9 @@ export function McpServerFormModal({
       timeout: formData.timeout,
       workspaceId,
     })
-  }, [formData, isFormValid, testConnection, workspaceId])
+  }
 
-  const handleSubmitForm = useCallback(async () => {
+  const handleSubmitForm = async () => {
     if (!isFormValid || isDomainBlocked) return
 
     setIsSubmitting(true)
@@ -562,20 +556,9 @@ export function McpServerFormModal({
     } finally {
       setIsSubmitting(false)
     }
-  }, [
-    formData,
-    isFormValid,
-    isDomainBlocked,
-    testConnection,
-    workspaceId,
-    onSubmit,
-    onOpenChange,
-    mode,
-    oauthClientSecretTouched,
-    originalData,
-  ])
-
-  const handleSubmitJson = useCallback(async () => {
+  }
+
+  const handleSubmitJson = async () => {
     const config = parseJsonConfig(jsonInput)
     if (!config) return
 
@@ -623,15 +606,7 @@ export function McpServerFormModal({
     } finally {
       setIsSubmitting(false)
     }
-  }, [
-    jsonInput,
-    parseJsonConfig,
-    allowedMcpDomains,
-    testConnection,
-    workspaceId,
-    onSubmit,
-    onOpenChange,
-  ])
+  }
 
   const isSubmitDisabled =
     isSubmitting || !isFormValid || isDomainBlocked || (mode === 'edit' && !hasChanges)
@@ -727,7 +702,7 @@ export function McpServerFormModal({
               <button
                 type='button'
                 onClick={() => setShowAdvanced((v) => !v)}
-                className='mt-1 flex items-center gap-1 self-start text-[var(--text-secondary)] text-small hover:text-[var(--text-primary)]'
+                className='mt-1 flex items-center gap-1 self-start text-[var(--text-secondary)] text-small hover-hover:text-[var(--text-primary)]'
               >
                 {showAdvanced ? (
                   <ChevronDown className='h-[14px] w-[14px]' />