fix: multiple connections issue

[focux]

This pull request aims to fix #1. I saw an old PR (#2) trying to fix this same issue using refs, but the problem with that was that it was setting the ref inside the render function and not inside an useEffect hook, therefore, it was creating a new connection of socket.io in each render.

The approach that I followed was creating and storing the instance of socket.io inside an useEffect hook. The only caveat that this approach has is that in the first render it will return a null value and after that, the socket instance; this because of the useEffect hook.

[zilahir]

@focux this is clever! i have tested your fix, and by wrapping the socket in if (socket), works like charm! :)

thank you for your contribution!

[realdennis]

Awesome, overall is good, the last pr #2 did not concern about ref will change in render function, I thought your approach is good to fix the #1 , since the return array is empty so the instance will be created once.

But please check L8, I think the return value would be function instead socket instance.