React 19 de Cero a Experto / Tiempo real y sistemas distribuidos

Integrar el socket en React: useSocket

Teoría24 min20 XP

Una conexión de socket es un recurso VIVO: se abre, escucha eventos, y debe CERRARSE cuando el componente se va —o acumulas conexiones fantasma y manejadores duplicados—. Es exactamente el terreno de useEffect y su cleanup (módulo 3). Y como esa lógica se repite, se empaqueta en un custom hook: useSocket. Hoy lo construyes y lo pruebas en vivo con el socket simulado —el patrón que usarás con Socket.io real—.

El recurso que hay que cerrar

useSocket en vivo (con socket simulado)

Aquí un useSocket que conecta al montar, escucha un evento, y limpia al desmontar. Usa un socket SIMULADO (mismo on/emit de Socket.io) para correr en vivo:

Escribe y envía: tu mensaje llega (eco del "servidor") y el bot responde ~1s después. El useSocket encapsula todo: abre en el efecto, escucha "mensaje", y —clave— DESUSCRIBE el manejador en el cleanup (socket.off). Con Socket.io real, cambiarías crearSocketSimulado() por io("https://...") y el cleanup sería socket.disconnect() —la estructura es idéntica—. El socketRef guarda la conexión para poder emit desde enviar sin re-crearla en cada render (módulo 3: un ref para un valor mutable que no repinta).

Las reglas de un socket en React

Los tres cuidados

Integrar un socket bien exige tres cosas:

Conectar en un efecto, cerrar en el cleanup. El socket se abre en useEffect (no en el cuerpo del componente, que corre en cada render) y se cierra en el return del efecto. Con [] como dependencias: una conexión al montar, cierre al desmontar.
Suscribir y DESUSCRIBIR cada manejador. Cada socket.on(...) necesita su socket.off(...) en el cleanup. Si no, al re-ejecutarse el efecto acumulas manejadores duplicados y verás cada mensaje dos, tres veces —el bug clásico de sockets en React—.
Guardar la conexión en un ref. Para emitir eventos desde manejadores de la UI (enviar) sin re-crear el socket, lo guardas en un useRef. No va en estado (no se muestra ni debe repintar).

Empaquetar esto en un useSocket te da una conexión bien gestionada en una línea (const { mensajes, enviar } = useSocket()), reutilizable en cualquier componente. Es el mismo valor de los custom hooks del módulo 3, aplicado al recurso más delicado: una conexión en vivo.

¿Por qué es crítico el cleanup (socket.off / disconnect) al usar un socket en un useEffect?

Mini-reto

Amplía el useSocket: 1) agrega un estado conectado (booleano) que se ponga en true al montar (y false al limpiar) para mostrar un indicador "🟢 en línea"; 2) agrega un método limpiar() que vacíe los mensajes; 3) en un comentario, explica qué pasaría si quitaras el socket.off del cleanup y el componente se remontara tres veces (pista: cada mensaje aparecería… ¿cuántas veces?). Confirma que el hook encapsula toda la gestión de la conexión.

Qué sigue

Ya tienes una conexión bien gestionada. La próxima lección la convierte en un CHAT en vivo de verdad: lista de mensajes, envío optimista (que se vea al instante, como el módulo 4), y el manejo de una conversación fluida —el corazón del proyecto final—.