Issue with multiple event listeners

[nicolinho22]

Hi everyone,

I have a chat app which is written in React. I've defined multiple hooks which handle different protocols like useMultiUserChat or even specific stanza type like useIqStanzaRequest.

I have the following code:

  const useIqStanzaRequest = (callback: (stanza: Stanza) => void) => {
      const requestId = useRef<string>();
  
      const onStanzaHandler = (stanza: Stanza) => {
	      if (stanza.is('iq') && stanza.attrs.id === requestId.current) {
		      callback(stanza);
	      }
      };
  
      const request = (stanza: Stanza) => {
	      const id = uuidv4();
	      const stanzaWithId = { ...stanza };
  
	      stanzaWithId.attrs.id = id;
	      requestId.current = id;
  
	      xmpp()?.send(stanzaWithId);
      };
  
      useXmppEvent('stanza', onStanzaHandler);
  
      return request;
  };
  
  export default useIqStanzaRequest;

In useMultiUserChat hook, I have another useXmppEvent('stanza', onStanzaHandler), so I have multiple listeners attached to a stanza event. It seems this is either problematic for this library, or I'm not seeing something. The useXmppEvent hook looks like this:

  const useXmppEvent = (event: string, callback: (...args: any[]) => void) => {
      const error = useSelector((state: RootState) => state.xmppConnection.error);
      const isClientSet = useSelector((state: RootState) => state.xmppConnection.isClientSet);
  
      useEffect(() => {
	      if (!error && isClientSet) {
		      xmpp()?.on(event, callback);
		      return () => {
			      xmpp()?.removeListener(event, callback);
		      };
	      }
      }, [event, callback, error, isClientSet]);
  };
  
  export default useXmppEvent;

I would really appreciate some help as I'm already stuck on this for quite some time.