React - best practices with connections - disconnect and unbind

[sajcics]

Do you want to request a feature or report a bug?
Documentation explanation for connections how they are terminated and preserved, or any performance advice.

What is the current behavior?
On React re-renders, how I can preserve connection so I do not have to open a connection twice? My component acts as provider in the highest root of the React hierarchy. Currently in useEffect, I am subscribing to X channels. On unmount, I unbind all events on the channels and as well unsubscribe from particular channel (otherwise I will get events twice!), and at the end disconnect from pusher. What I can not figure out from the documentation, is pusher.disconnect() necessary or Pusher will by itself found out when to disconnect the connection? Is it possible to preserve a connection between re-renders?

What I am experiencing from attached code, that on re-renders, connection that have been created on first mount is terminated and created new on new render. As well check a image in attachment.

If I only do pusher.unsubscribe from XY channel, bind events will still trigger -> experience to receive client events twice.

If the current behavior is a bug, please provide the steps to reproduce and
if possible a minimal demo of the problem via https://jsfiddle.net or similar.

const Comp = ({channels}) => {

   const channelRefs = useRef();

   useEffect(() => {
      if (pusher.connection.state === 'disconnected') pusher.connect();

      channels.map(channelName =>
         pusher.subscribe(channelName)
      );

       return () => {
          channelRefs.current.forEach(channel => {
              channel.unbind_all();
              pusher.unsubscribe(channel.name);
        });
      };
    }, [channels]);
  
  
    useEffect(() => {
       return () => {
          pusher.disconnect();
          pusher.unbind_all();
       }
    }, [])
 }

What is the expected behavior?
Once subscribed to channel, on re-render will not establish new connection to minimize calls to Pusher service and performance wise.

Any advice or tutorial of best practices of subscribing to new channels and creating new channels without connection recreations.

**Which versions of Pusher, and which browsers / OS are affected by this issue?
Chrome, Firefox, Chromium on Linux Ubuntu 20.04. React version 18. Pusher-js 8.4.0-rc2 and 8.3.0