---
name: use_sse
kind: component
lang: ts
domain: core
version: "1.0.0"
purity: impure
signature: "useSSE<T>(opts: UseSSEOptions<T>): UseSSEResult<T>"
description: "Hook para Server-Sent Events con auto-reconexion y backoff exponencial. Parsea eventos como JSON. Acumula todos los eventos en data[]. Expone last_event, status y close."
tags: [sse, server-sent-events, stream, hook, realtime, reconnect, core, component]
uses_functions: []
uses_types: []
returns: []
returns_optional: false
error_type: "error_go_core"
imports: [react]
params:
  - name: url
    desc: "URL del endpoint SSE (ej: http://localhost:8484/api/logs/stream)"
  - name: enabled
    desc: "Si conecta automaticamente al montar (default true)"
  - name: reconnect
    desc: "Si reconecta automaticamente con backoff exponencial (default true)"
  - name: reconnect_interval
    desc: "Delay inicial de reconexion en ms (default 1000). Se duplica hasta max_reconnect_interval."
  - name: max_reconnect_interval
    desc: "Delay maximo de reconexion en ms (default 30000)"
  - name: event_name
    desc: "Nombre del evento SSE a escuchar (default 'message')"
  - name: on_event
    desc: "Callback por cada evento recibido con el dato parseado"
output: "Objeto con data[], last_event, status (connecting/open/closed), error, close() y connect()"
tested: false
tests: []
test_file_path: ""
file_path: "frontend/functions/core/use_sse.tsx"
props:
  - name: url
    type: "string"
    required: true
    description: "URL del endpoint SSE"
  - name: enabled
    type: "boolean"
    required: false
    description: "Conectar al montar (default true)"
  - name: reconnect
    type: "boolean"
    required: false
    description: "Auto-reconectar (default true)"
  - name: reconnect_interval
    type: "number"
    required: false
    description: "Delay inicial reconexion en ms (default 1000)"
  - name: max_reconnect_interval
    type: "number"
    required: false
    description: "Delay maximo reconexion en ms (default 30000)"
  - name: event_name
    type: "string"
    required: false
    description: "Nombre evento SSE (default 'message')"
emits: [on_event, on_error]
has_state: true
framework: react
variant: [default]
---

## Ejemplo

```tsx
import { useSSE } from '@/functions/core/use_sse'

interface LogEntry { level: string; msg: string; ts: number }

function LogViewer() {
  const { data: logs, last_event, status, close } = useSSE<LogEntry>({
    url: 'http://localhost:8484/api/logs/stream',
    reconnect: true,
    reconnect_interval: 2000,
  })

  return (
    <div>
      <span>Status: {status}</span>
      <div style={{ overflow: 'auto', height: 400 }}>
        {logs.map((log, i) => (
          <div key={i} style={{ color: log.level === 'error' ? 'red' : 'inherit' }}>
            [{log.level}] {log.msg}
          </div>
        ))}
      </div>
      <button onClick={close}>Cerrar conexion</button>
    </div>
  )
}
```

## Notas

- El backoff exponencial duplica el delay hasta `max_reconnect_interval`
- Si el evento no es JSON valido, se guarda como string
- `close()` previene reconexion automatica
- `connect()` fuerza reconexion manual aunque haya sido cerrado manualmente
- `data` acumula todos los eventos de la sesion. Para limpiar, desmontar y remontar el componente.
