Additional socket.io connection when provider is re-rendered about server-push-hooks

[mfrachet]

I should definitely investigate this 😅 . Sorry for the delay, I'm quite busy at work these days :D

[dmozzoni]

No problem, I worked around it by creating an alternative provider component, which is basically a copy of yours but I instead import SocketIOClient from the package since you thankfully export it already, and then separated the useRef and the socket.io connection calls. Not saying it's the best solution, but it served my purposes.

import React, {useRef} from 'react';
import io from 'socket.io-client';
// import { SocketIOContext } from "./context";
import {SocketIOContext} from 'use-socketio';

export interface ISocketIOProviderProps {
  url: string;
  opts?: SocketIOClient.ConnectOpts;
}

export const SocketIOProvider: React.FC<ISocketIOProviderProps> = ({
  url,
  opts,
  children
}) => {
  // const socketRef = useRef(io(url, opts || {}));
  const socketRef = useRef<any>();
  if (!socketRef.current) socketRef.current = io(url, opts || {});

  return (
    <SocketIOContext.Provider value={socketRef.current}>
      {children}
    </SocketIOContext.Provider>
  );
};

[mfrachet]

Thanks to your snippet I've been able to fix this support quickly. Thank you so much for your help! It should be fixed and available in the 2.0.1 versions 😊 . Let me know if it works for you!

Have a great day :)