improvement(react): replace unnecessary useEffect patterns with better React primitives (#3675)

* improvement(react): replace unnecessary useEffect patterns with better React primitives

* fix(react): revert unsafe render-time side effects to useEffect

* fix(react): restore useEffect for modals, scroll, and env sync

- Modals (create-workspace, rename-document, edit-knowledge-base): restore
  useEffect watching `open` prop for form reset on programmatic open, since
  Radix onOpenChange doesn't fire for parent-driven prop changes
- Popover: add useEffect watching `open` for programmatic close reset
- Chat scroll: restore useEffect watching `isStreamingResponse` so the 1s
  suppression timer starts when streaming begins, not before the fetch
- Credentials manager: revert render-time pattern to useEffect for initial
  sync from cached React Query data (useRef captures initial value, making
  the !== check always false on mount)

* fix(react): restore useEffect for help/invite modals, combobox index reset

- Help modal: restore useEffect watching `open` for form reset on
  programmatic open (same Radix onOpenChange pattern as other modals)
- Invite modal: restore useEffect watching `open` to clear error on
  programmatic open
- Combobox: restore useEffect to reset highlightedIndex when filtered
  options shrink (prevents stale index from reappearing when options grow)
- Remove no-op handleOpenChange wrappers in rename-document and
  edit-knowledge-base modals (now pure pass-throughs after useEffect fix)

* fix(context-menu): use requestAnimationFrame for ColorGrid focus, remove no-op wrapper in create-workspace-modal

- ColorGrid: replaced setTimeout with requestAnimationFrame for initial
  focus to wait for submenu paint completion
- create-workspace-modal: removed handleOpenChange pass-through wrapper,
  use onOpenChange directly

* fix(files): restore filesRef pattern to prevent preview mode reset on refetch

The useEffect that sets previewMode should only run when selectedFileId
changes, not when files array reference changes from React Query refetch.
Restores the filesRef pattern to read latest files without triggering
the effect — prevents overriding user's manual mode selection.

* fix(add-documents-modal, combobox): restore useEffect for modal reset, fix combobox dep array

- add-documents-modal: handleOpenChange(true) is dead code in Radix
  controlled mode — restored useEffect watching open for reset-on-open
- combobox: depend on filteredOptions array (not .length) so highlight
  resets when items change even with same count

Author: waleedlatif1

apps/sim/app/(auth)/login/login-form.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { Eye, EyeOff } from 'lucide-react'
 import Link from 'next/link'
@@ -99,15 +99,21 @@ export default function LoginPage({
   const router = useRouter()
   const searchParams = useSearchParams()
   const [isLoading, setIsLoading] = useState(false)
-  const [_mounted, setMounted] = useState(false)
   const [showPassword, setShowPassword] = useState(false)
   const [password, setPassword] = useState('')
   const [passwordErrors, setPasswordErrors] = useState<string[]>([])
   const [showValidationError, setShowValidationError] = useState(false)
   const buttonClass = useBrandedButtonClass()
 
-  const [callbackUrl, setCallbackUrl] = useState('/workspace')
-  const [isInviteFlow, setIsInviteFlow] = useState(false)
+  const callbackUrlParam = searchParams?.get('callbackUrl')
+  const invalidCallbackRef = useRef(false)
+  if (callbackUrlParam && !validateCallbackUrl(callbackUrlParam) && !invalidCallbackRef.current) {
+    invalidCallbackRef.current = true
+    logger.warn('Invalid callback URL detected and blocked:', { url: callbackUrlParam })
+  }
+  const callbackUrl =
+    callbackUrlParam && validateCallbackUrl(callbackUrlParam) ? callbackUrlParam : '/workspace'
+  const isInviteFlow = searchParams?.get('invite_flow') === 'true'
 
   const [forgotPasswordOpen, setForgotPasswordOpen] = useState(false)
   const [forgotPasswordEmail, setForgotPasswordEmail] = useState('')
@@ -120,30 +126,11 @@ export default function LoginPage({
   const [email, setEmail] = useState('')
   const [emailErrors, setEmailErrors] = useState<string[]>([])
   const [showEmailValidationError, setShowEmailValidationError] = useState(false)
-  const [resetSuccessMessage, setResetSuccessMessage] = useState<string | null>(null)
-
-  useEffect(() => {
-    setMounted(true)
-
-    if (searchParams) {
-      const callback = searchParams.get('callbackUrl')
-      if (callback) {
-        if (validateCallbackUrl(callback)) {
-          setCallbackUrl(callback)
-        } else {
-          logger.warn('Invalid callback URL detected and blocked:', { url: callback })
-        }
-      }
-
-      const inviteFlow = searchParams.get('invite_flow') === 'true'
-      setIsInviteFlow(inviteFlow)
-
-      const resetSuccess = searchParams.get('resetSuccess') === 'true'
-      if (resetSuccess) {
-        setResetSuccessMessage('Password reset successful. Please sign in with your new password.')
-      }
-    }
-  }, [searchParams])
+  const [resetSuccessMessage, setResetSuccessMessage] = useState<string | null>(() =>
+    searchParams?.get('resetSuccess') === 'true'
+      ? 'Password reset successful. Please sign in with your new password.'
+      : null
+  )
 
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {

apps/sim/app/(auth)/reset-password/reset-password-content.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { Suspense, useEffect, useState } from 'react'
+import { Suspense, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import Link from 'next/link'
 import { useRouter, useSearchParams } from 'next/navigation'
@@ -22,14 +22,9 @@ function ResetPasswordContent() {
     text: '',
   })
 
-  useEffect(() => {
-    if (!token) {
-      setStatusMessage({
-        type: 'error',
-        text: 'Invalid or missing reset token. Please request a new password reset link.',
-      })
-    }
-  }, [token])
+  const tokenError = !token
+    ? 'Invalid or missing reset token. Please request a new password reset link.'
+    : null
 
   const handleResetPassword = async (password: string) => {
     try {
@@ -87,8 +82,8 @@ function ResetPasswordContent() {
           token={token}
           onSubmit={handleResetPassword}
           isSubmitting={isSubmitting}
-          statusType={statusMessage.type}
-          statusMessage={statusMessage.text}
+          statusType={tokenError ? 'error' : statusMessage.type}
+          statusMessage={tokenError ?? statusMessage.text}
         />
       </div>
 

apps/sim/app/(auth)/signup/signup-form.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { Suspense, useEffect, useState } from 'react'
+import { Suspense, useMemo, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { Eye, EyeOff } from 'lucide-react'
 import Link from 'next/link'
@@ -82,49 +82,32 @@ function SignupFormContent({
   const searchParams = useSearchParams()
   const { refetch: refetchSession } = useSession()
   const [isLoading, setIsLoading] = useState(false)
-  const [, setMounted] = useState(false)
   const [showPassword, setShowPassword] = useState(false)
   const [password, setPassword] = useState('')
   const [passwordErrors, setPasswordErrors] = useState<string[]>([])
   const [showValidationError, setShowValidationError] = useState(false)
-  const [email, setEmail] = useState('')
+  const [email, setEmail] = useState(() => searchParams.get('email') ?? '')
   const [emailError, setEmailError] = useState('')
   const [emailErrors, setEmailErrors] = useState<string[]>([])
   const [showEmailValidationError, setShowEmailValidationError] = useState(false)
-  const [redirectUrl, setRedirectUrl] = useState('')
-  const [isInviteFlow, setIsInviteFlow] = useState(false)
   const buttonClass = useBrandedButtonClass()
 
+  const redirectUrl = useMemo(
+    () => searchParams.get('redirect') || searchParams.get('callbackUrl') || '',
+    [searchParams]
+  )
+  const isInviteFlow = useMemo(
+    () =>
+      searchParams.get('invite_flow') === 'true' ||
+      redirectUrl.startsWith('/invite/') ||
+      redirectUrl.startsWith('/credential-account/'),
+    [searchParams, redirectUrl]
+  )
+
   const [name, setName] = useState('')
   const [nameErrors, setNameErrors] = useState<string[]>([])
   const [showNameValidationError, setShowNameValidationError] = useState(false)
 
-  useEffect(() => {
-    setMounted(true)
-    const emailParam = searchParams.get('email')
-    if (emailParam) {
-      setEmail(emailParam)
-    }
-
-    // Check both 'redirect' and 'callbackUrl' params (login page uses callbackUrl)
-    const redirectParam = searchParams.get('redirect') || searchParams.get('callbackUrl')
-    if (redirectParam) {
-      setRedirectUrl(redirectParam)
-
-      if (
-        redirectParam.startsWith('/invite/') ||
-        redirectParam.startsWith('/credential-account/')
-      ) {
-        setIsInviteFlow(true)
-      }
-    }
-
-    const inviteFlowParam = searchParams.get('invite_flow')
-    if (inviteFlowParam === 'true') {
-      setIsInviteFlow(true)
-    }
-  }, [searchParams])
-
   const validatePassword = (passwordValue: string): string[] => {
     const errors: string[] = []
 

apps/sim/app/chat/components/input/input.tsx

@@ -71,11 +71,6 @@ export const ChatInput: React.FC<{
     }
   }
 
-  // Adjust height on input change
-  useEffect(() => {
-    adjustTextareaHeight()
-  }, [inputValue])
-
   // Close the input when clicking outside (only when empty)
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
@@ -94,17 +89,14 @@ export const ChatInput: React.FC<{
     return () => document.removeEventListener('mousedown', handleClickOutside)
   }, [inputValue])
 
-  // Handle focus and initial height when activated
-  useEffect(() => {
-    if (isActive && textareaRef.current) {
-      textareaRef.current.focus()
-      adjustTextareaHeight() // Adjust height when becoming active
-    }
-  }, [isActive])
-
   const handleActivate = () => {
     setIsActive(true)
-    // Focus is now handled by the useEffect above
+    requestAnimationFrame(() => {
+      if (textareaRef.current) {
+        textareaRef.current.focus()
+        adjustTextareaHeight()
+      }
+    })
   }
 
   // Handle file selection
@@ -186,6 +178,7 @@ export const ChatInput: React.FC<{
 
   const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     setInputValue(e.target.value)
+    adjustTextareaHeight()
   }
 
   // Handle voice start with smooth transition to voice-first mode

apps/sim/app/chat/components/voice-interface/voice-interface.tsx

@@ -78,9 +78,10 @@ export function VoiceInterface({
   const currentStateRef = useRef<'idle' | 'listening' | 'agent_speaking'>('idle')
   const isCallEndedRef = useRef(false)
 
-  useEffect(() => {
-    currentStateRef.current = state
-  }, [state])
+  const updateState = useCallback((next: 'idle' | 'listening' | 'agent_speaking') => {
+    setState(next)
+    currentStateRef.current = next
+  }, [])
 
   const recognitionRef = useRef<SpeechRecognition | null>(null)
   const mediaStreamRef = useRef<MediaStream | null>(null)
@@ -97,9 +98,10 @@ export function VoiceInterface({
       (window as WindowWithSpeech).webkitSpeechRecognition
     )
 
-  useEffect(() => {
-    isMutedRef.current = isMuted
-  }, [isMuted])
+  const updateIsMuted = useCallback((next: boolean) => {
+    setIsMuted(next)
+    isMutedRef.current = next
+  }, [])
 
   const setResponseTimeout = useCallback(() => {
     if (responseTimeoutRef.current) {
@@ -108,7 +110,7 @@ export function VoiceInterface({
 
     responseTimeoutRef.current = setTimeout(() => {
       if (currentStateRef.current === 'listening') {
-        setState('idle')
+        updateState('idle')
       }
     }, 5000)
   }, [])
@@ -123,10 +125,10 @@ export function VoiceInterface({
   useEffect(() => {
     if (isPlayingAudio && state !== 'agent_speaking') {
       clearResponseTimeout()
-      setState('agent_speaking')
+      updateState('agent_speaking')
       setCurrentTranscript('')
 
-      setIsMuted(true)
+      updateIsMuted(true)
       if (mediaStreamRef.current) {
         mediaStreamRef.current.getAudioTracks().forEach((track) => {
           track.enabled = false
@@ -141,17 +143,17 @@ export function VoiceInterface({
         }
       }
     } else if (!isPlayingAudio && state === 'agent_speaking') {
-      setState('idle')
+      updateState('idle')
       setCurrentTranscript('')
 
-      setIsMuted(false)
+      updateIsMuted(false)
       if (mediaStreamRef.current) {
         mediaStreamRef.current.getAudioTracks().forEach((track) => {
           track.enabled = true
         })
       }
     }
-  }, [isPlayingAudio, state, clearResponseTimeout])
+  }, [isPlayingAudio, state, clearResponseTimeout, updateState, updateIsMuted])
 
   const setupAudio = useCallback(async () => {
     try {
@@ -310,7 +312,7 @@ export function VoiceInterface({
       return
     }
 
-    setState('listening')
+    updateState('listening')
     setCurrentTranscript('')
 
     if (recognitionRef.current) {
@@ -320,10 +322,10 @@ export function VoiceInterface({
         logger.error('Error starting recognition:', error)
       }
     }
-  }, [isInitialized, isMuted, state])
+  }, [isInitialized, isMuted, state, updateState])
 
   const stopListening = useCallback(() => {
-    setState('idle')
+    updateState('idle')
     setCurrentTranscript('')
 
     if (recognitionRef.current) {
@@ -333,15 +335,15 @@ export function VoiceInterface({
         // Ignore
       }
     }
-  }, [])
+  }, [updateState])
 
   const handleInterrupt = useCallback(() => {
     if (state === 'agent_speaking') {
       onInterrupt?.()
-      setState('listening')
+      updateState('listening')
       setCurrentTranscript('')
 
-      setIsMuted(false)
+      updateIsMuted(false)
       if (mediaStreamRef.current) {
         mediaStreamRef.current.getAudioTracks().forEach((track) => {
           track.enabled = true
@@ -356,14 +358,14 @@ export function VoiceInterface({
         }
       }
     }
-  }, [state, onInterrupt])
+  }, [state, onInterrupt, updateState, updateIsMuted])
 
   const handleCallEnd = useCallback(() => {
     isCallEndedRef.current = true
 
-    setState('idle')
+    updateState('idle')
     setCurrentTranscript('')
-    setIsMuted(false)
+    updateIsMuted(false)
 
     if (recognitionRef.current) {
       try {
@@ -376,7 +378,7 @@ export function VoiceInterface({
     clearResponseTimeout()
     onInterrupt?.()
     onCallEnd?.()
-  }, [onCallEnd, onInterrupt, clearResponseTimeout])
+  }, [onCallEnd, onInterrupt, clearResponseTimeout, updateState, updateIsMuted])
 
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
@@ -397,7 +399,7 @@ export function VoiceInterface({
     }
 
     const newMutedState = !isMuted
-    setIsMuted(newMutedState)
+    updateIsMuted(newMutedState)
 
     if (mediaStreamRef.current) {
       mediaStreamRef.current.getAudioTracks().forEach((track) => {
@@ -410,7 +412,7 @@ export function VoiceInterface({
     } else if (state === 'idle') {
       startListening()
     }
-  }, [isMuted, state, handleInterrupt, stopListening, startListening])
+  }, [isMuted, state, handleInterrupt, stopListening, startListening, updateIsMuted])
 
   useEffect(() => {
     if (isSupported) {