How to remove event listeners on unmount?

[stephanoparaskeva]

It is quite dangerous having multiple event listeners, is there any way to remove them?

For example here, I'm building a critical function to discover the duration of a call:

  const timeline = useRef<any>([]);

  // Initializes all ConnectyCube event listeners for calls.
  const cubeListenersInit = () => {
    ConnectyCube.videochat.onSessionConnectionStateChangedListener = (
      _: any,
      __: any,
      connectionState: number
    ) => {
      const { SessionConnectionState: state } = ConnectyCube.videochat;

      const xyz = (eventState: number) => {
        if (eventState === state.UNDEFINED) {
          const status = 'UNDEFINED';
          timeline.current = [...timeline.current, { timestamp: new Date().toISOString(), status }];

          return;
        }
        if (eventState === state.CONNECTING) {
          const status = 'CONNECTING';
          timeline.current = [...timeline.current, { timestamp: new Date().toISOString(), status }];

          return;
        }
        if (eventState === state.CONNECTED) {
          const status = 'CONNECTED';
          timeline.current = [...timeline.current, { timestamp: new Date().toISOString(), status }];

          return;
        }
        if (eventState === state.FAILED) {
          const status = 'FAILED';
          timeline.current = [...timeline.current, { timestamp: new Date().toISOString(), status }];

          return;
        }
        if (eventState === state.DISCONNECTED) {
          const status = 'DISCONNECTED';
          timeline.current = [...timeline.current, { timestamp: new Date().toISOString(), status }];

          return;
        }
        if (eventState === state.cLOSED) {
          const status = 'CLOSED';
          timeline.current = [...timeline.current, { timestamp: new Date().toISOString(), status }];

          return;
        }
        if (eventState === state.COMPLETED) {
          const status = 'COMPLETED';
          timeline.current = [...timeline.current, { timestamp: new Date().toISOString(), status }];

          return;
        }
      };
      xyz(connectionState);
      console.warn(timeline.current);
    };
    ConnectyCube.videochat.onCallListener = onCallListener;
    ConnectyCube.videochat.onAcceptCallListener = onAcceptCallListener;
    ConnectyCube.videochat.onRemoteStreamListener = onRemoteStreamListener;
    ConnectyCube.videochat.onRejectCallListener = onRejectCallListener;
    ConnectyCube.videochat.onStopCallListener = onStopCallListener;
    ConnectyCube.videochat.onUserNotAnswerListener = onUserNotAnswerListener;
  };

Now if there is a remount, this will have 2 listeners and it never removes the listener so the timeline can end up having duplicates at each event looking like this:

 [
{"status": "CONNECTING", "timestamp": "2021-01-06T18:15:40.104Z"}, 
{"status": "CONNECTED", "timestamp": "2021-01-06T18:15:40.285Z"}, 
{"status": "COMPLETED", "timestamp": "2021-01-06T18:15:40.286Z"}, 
{"status": "CONNECTING", "timestamp": "2021-01-06T18:15:59.696Z"}, 
{"status": "CONNECTED", "timestamp": "2021-01-06T18:15:59.923Z"}, 
{"status": "COMPLETED", "timestamp": "2021-01-06T18:15:59.938Z"}
]

6 events rather than 3

[daoma90]

Did you find a solution to this? I also want to remove my listeners on unmount.

[DaveLomber]

Just set it to null

ConnectyCube.videochat.onSessionConnectionStateChangedListener = null

[ccvlad]

Closed due to inactivity. Please create a new issue if needed.