Estoy creando una aplicación React que usa Websocket para obtener datos de un socket de terceros. Necesito suscribirme a 5 puntos finales donde paso diferentes parámetros para obtener datos diferentes:

 function App() { const [topCurrencies, setTopCurrencies] = useState(['BTCUSD', 'LTCUSD', 'LTCBTC', 'ETHUSD', 'ETHBTC']); return ( <div className="App"> {topCurrencies.map(x => <CurrencyBar currency={x} />)} </div> ); } export default App;

Ahora, porque necesito recibir cada dato de moneda y actualizar el componente "CurrencyBar" basado en él, decidí usar múltiples WebSockets:

 function CurrencyBar({currency}) { const [data, setData] = useState(null) useEffect(() => { const ws = new WebSocket('wss://api-pub.bitfinex.com/ws/2') ws.addEventListener('open', () => { let msg = JSON.stringify({ event: 'subscribe', channel: 'ticker', symbol: `t${currency}`, }) ws.send(msg); }) ws.addEventListener('message', (event) => { setData(JSON.parse(event.data)) }) }, []) return ( <> {data} </> ) } export default CurrencyBar;

Mi pregunta es si hay un mejor enfoque porque imagino que crear 5 Websockets en lugar de 1 puede afectar el rendimiento (aunque el límite de velocidad para el dominio wss://api-pub.bitfinex.com/ está establecido en 20 conexiones por minuto ).

¿Tal vez hay una mejor manera en la que solo uso una instancia de la API "WebSocket"?