Cuando integras WebSockets en una aplicación React, usar librerías como Socket.IO puede añadir sobrecarga innecesaria.

El truco

// ANTES: Usando Socket.IO
import { useEffect } from 'react';
import io from 'socket.io-client';

const socket = io('http://localhost:4000');

function App() {
  useEffect(() => {
    socket.on('message', (data) => {
      console.log(data);
    });

    return () => socket.disconnect();
  }, []);

  return <div>App</div>;
}

// DESPUÉS: Usando WebSockets nativos
import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const socket = new WebSocket('ws://localhost:4000');

    socket.addEventListener('message', (event) => {
      console.log(event.data);
    });

    return () => socket.close();
  }, []);

  return <div>App</div>;
}

La versión nativa de WebSockets es simple y directa, sin necesidad de librerías adicionales. Con WebSockets, abres una conexión persistente y escuchas eventos de mensajes. El uso de addEventListener permite gestionar los mensajes entrantes de forma limpia. Al desmontar el componente, cierras la conexión con socket.close(), asegurando un manejo eficiente de los recursos.

Optar por WebSockets nativos en lugar de Socket.IO simplifica tu stack y mejora la eficiencia de la aplicación.