fix: SSE connect/disconnect loop — stabilize with callback refs

Root cause: useRealtimeEvents hook had callback dependencies in its
useCallback/useEffect chain. Every parent re-render created new callback
refs → connect() recreated → useEffect tore down old SSE → new SSE opened
→ instant connect/disconnect loop generating thousands of requests.

Fix: Store callbacks in a mutable ref (cbRefs) so the connect function
has zero dependencies and the SSE connection stays stable across renders.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: atulmgupta

web/src/hooks/useRealtimeEvents.ts

@@ -29,18 +29,13 @@ export function useRealtimeEvents(options: SSEOptions = {}) {
   const [reconnectCount, setReconnectCount] = useState(0)
   const sourceRef = useRef<EventSource | null>(null)
   const reconnectTimer = useRef<number>(undefined)
-  const backoffRef = useRef(1000) // start at 1s, max 30s
+  const backoffRef = useRef(1000)
   const eventBufferRef = useRef<BufferedEvent[]>([])
   const hasConnectedOnce = useRef(false)
 
-  const flushEventBuffer = useCallback(() => {
-    const buffer = eventBufferRef.current
-    eventBufferRef.current = []
-    for (const event of buffer) {
-      if (event.type === 'vehicle_update') onVehicleUpdate?.(event.data)
-      else if (event.type === 'alert') onAlert?.(event.data)
-    }
-  }, [onVehicleUpdate, onAlert])
+  // Store callbacks in refs to avoid recreating the connection on every render
+  const cbRefs = useRef({ onVehicleUpdate, onAlert, onConnected, onDisconnected })
+  cbRefs.current = { onVehicleUpdate, onAlert, onConnected, onDisconnected }
 
   const connect = useCallback(() => {
     if (sourceRef.current) {
@@ -53,25 +48,28 @@ export function useRealtimeEvents(options: SSEOptions = {}) {
     source.addEventListener('connected', (e) => {
       setConnected(true)
       setStatus('connected')
-      backoffRef.current = 1000 // reset backoff on successful connection
+      backoffRef.current = 1000
       if (hasConnectedOnce.current) {
         setReconnectCount(c => c + 1)
       }
       hasConnectedOnce.current = true
       const data = JSON.parse(e.data)
-      onConnected?.(data.client_id)
-      // Flush any events buffered during disconnect
-      flushEventBuffer()
+      cbRefs.current.onConnected?.(data.client_id)
+      // Flush buffered events
+      const buffer = eventBufferRef.current
+      eventBufferRef.current = []
+      for (const evt of buffer) {
+        if (evt.type === 'vehicle_update') cbRefs.current.onVehicleUpdate?.(evt.data)
+        else if (evt.type === 'alert') cbRefs.current.onAlert?.(evt.data)
+      }
     })
 
     source.addEventListener('vehicle_update', (e) => {
-      const data = JSON.parse(e.data)
-      onVehicleUpdate?.(data)
+      cbRefs.current.onVehicleUpdate?.(JSON.parse(e.data))
     })
 
     source.addEventListener('alert', (e) => {
-      const data = JSON.parse(e.data)
-      onAlert?.(data)
+      cbRefs.current.onAlert?.(JSON.parse(e.data))
     })
 
     source.addEventListener('heartbeat', () => {
@@ -82,21 +80,18 @@ export function useRealtimeEvents(options: SSEOptions = {}) {
       setConnected(false)
       const wasConnected = hasConnectedOnce.current
       setStatus(wasConnected ? 'reconnecting' : 'disconnected')
-      onDisconnected?.()
+      cbRefs.current.onDisconnected?.()
       source.close()
       sourceRef.current = null
-      // Exponential backoff with jitter, capped at 30s
       const jitter = Math.random() * 500
       const delay = Math.min(backoffRef.current + jitter, 30_000)
       backoffRef.current = Math.min(backoffRef.current * 2, 30_000)
       reconnectTimer.current = window.setTimeout(connect, delay)
     }
-  }, [onVehicleUpdate, onAlert, onConnected, onDisconnected, flushEventBuffer])
+  }, []) // no deps — callbacks accessed via stable refs
 
-  /** Buffer an event to replay after reconnection */
   const bufferEvent = useCallback((type: string, data: unknown) => {
     eventBufferRef.current.push({ type, data, timestamp: Date.now() })
-    // Keep buffer bounded to prevent memory leaks
     if (eventBufferRef.current.length > 200) {
       eventBufferRef.current = eventBufferRef.current.slice(-100)
     }