How do you manage socket.on listeners on React?

[branlok]

Building a multiplayer board game with socket.io on react.

On multiple component that carry the same name listener, I notice sometimes theres weird kinks from my expected results. I've fixed it by reducing it to one listener using an HOC useEffect listener with extra details in the response. Alternatively i was thinking of making a dynamic listener name like socket.on(faceoff_resolved_${playerId}, (response) => {} on each children component (while applying the same logic on the backend).

But this makes me wonder, when i register a listener of the same name over different component's useEffect with dependency of []. Is it correct to assume, another clean up function socket.off of the same name were to unmount, it would eliminate all instances that listener even if it were in a different component?

• What are some good practices? i'll assume my alternate solution is not the best way socket.on(faceoff_resolved_${playerId}, (response) => {} . Can anyone explain why not? is it performance hindering due to more traffic?

Basic setup:
App.js

let connect = io.connect("http://localhost:3001"); 
function App() {
  const socket = useRef(connect);

 return (
<contextWrapper socket={socket.current}>
//children components
</contextWrapper>
)


}

Any nested component:

useEffect(() => {
socket.on('demoListener', (response) => {
 setState(response.something);
}
}, () => {socket.off('demoListener')})