Issue with multiple event listeners #935

nicolinho22 · 2022-02-11T10:53:08Z

nicolinho22
Feb 11, 2022

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;