Möchte man socket.io und react zusammen benutzen, so kommt man schnell in die Schwierigkeit, dass die React-App mehrere verschiedene Verbindungen aufmacht und zu oft reagiert. Das Ganze lässt sich schnell und einfach mit einem Context-Provider verbinden und man hat die Verbindung in allen Komponenten.

1. Socket Context erstellen

Am besten einfach eine Datei unter context/socket.js erstellen

https://dev.to/bravemaster619/how-to-use-socket-io-client-correctly-in-react-app-o65

https://dev.to/bravemaster619/how-to-prevent-multiple-socket-connections-and-events-in-react-531d

Das ist auch schon alles, was man für den Provider benötigt. Als nächstes muss am besten in der index.js oder app.js die Verbindung initialisiert werden.

2. Context-Provider einbinden und einen Wert mitgeben

Das Ganze sieht dann so aus:

3. Socket in untergeordneter Komponente benutzen