Avoid Stale Closure Bugs in Hooks and Callbacks

'use client'
 
// ❌ count is always 0 inside the interval — captured from the first render
function Counter() {
  const [count, setCount] = useState(0)
 
  useEffect(() => {
    const id = setInterval(() => {
      console.log(count) // Always logs 0!
      setCount(count + 1) // Always sets to 1!
    }, 1000)
    return () => clearInterval(id)
  }, []) // Empty deps = closure captures initial count forever
 
  return <span>{count}</span>
}

// ❌ Debounced handler uses stale search term
function SearchBar() {
  const [query, setQuery] = useState('')
  const [results, setResults] = useState([])
 
  const debouncedSearch = useMemo(
    () => debounce(async () => {
      const data = await fetch(`/api/search?q=${query}`) // query is stale!
      setResults(await data.json())
    }, 300),
    [] // query not in deps = always uses initial empty string
  )
 
  return <input onChange={e => { setQuery(e.target.value); debouncedSearch() }} />
}

// ❌ Event listener references stale state
function ChatRoom({ roomId }) {
  const [messages, setMessages] = useState([])
 
  useEffect(() => {
    const ws = new WebSocket(`/ws/${roomId}`)
    ws.onmessage = (event) => {
      // messages is always [] here — captured from this render
      setMessages([...messages, JSON.parse(event.data)]) // Overwrites all messages!
    }
    return () => ws.close()
  }, [roomId])
}

'use client'
 
// ✅ Use functional updater — always gets the current state
function Counter() {
  const [count, setCount] = useState(0)
 
  useEffect(() => {
    const id = setInterval(() => {
      setCount(prev => prev + 1) // prev is always current
    }, 1000)
    return () => clearInterval(id)
  }, [])
 
  return <span>{count}</span>
}

// ✅ Use a ref for values needed in long-lived callbacks
function SearchBar() {
  const [query, setQuery] = useState('')
  const queryRef = useRef(query)
  queryRef.current = query // Always up to date
 
  const debouncedSearch = useMemo(
    () => debounce(async () => {
      const data = await fetch(`/api/search?q=${queryRef.current}`) // Always fresh
      setResults(await data.json())
    }, 300),
    []
  )
 
  return <input onChange={e => { setQuery(e.target.value); debouncedSearch() }} />
}

// ✅ Functional updater for arrays/objects in subscriptions
function ChatRoom({ roomId }) {
  const [messages, setMessages] = useState([])
 
  useEffect(() => {
    const ws = new WebSocket(`/ws/${roomId}`)
    ws.onmessage = (event) => {
      setMessages(prev => [...prev, JSON.parse(event.data)]) // prev is current
    }
    return () => ws.close()
  }, [roomId])
}

# Find setInterval/setTimeout using state variables directly
grep -rn "setInterval\|setTimeout" src/ --include="*.tsx" --include="*.ts" -A 3 | grep -v "prev =>\|prev)"