Twilio Remove listeners from conversations

Question

Hello trying to make a conversations app based on twilio

The app is doing fine but everytime someone clicks a Conversation from the Conversations List, it starts a useEffect, the useEffect has something like the following function:

  const setChannelEvents = useCallback((channel) => {
    channel.on('messageAdded', (message) => {
      setMessages(prevMessages => [...message, prevMessages])
    })

The problem is that every time we leave the conversation that listener stays on so every time someone clicks on a conversation the app is creating a loot of listeners and well that isn't cool.

Wondering how to turn off the listener when it leaves the component

Tried something like this:

  useEffect(() => {
    Twilio.getClient()
      .then((client) => client.getConversationBySid(channelId))
      .then((channel) => setChannelEvents(channel))
      .catch((err) => console.log('err', err.message))
      .finally(() => setLoading(''))
    
      return () => chatClientChannel.current.removeListener('messageAdded')
  }, [channelId, setChannelEvents])

Didnt work

Any help would be appreciated, Thanks :)

Answer 1

Twilio developer evangelist here.

I think your useEffect is mostly right, but you are potentially using a different object in the return clause to the original channel. The beauty of a React hook like useEffect is that you can encapsulate some of the state in the function, and then use that in the tear down.

Try this instead:

  const handleMessageAdded = (message) => {
    // do something with the new message
  }

  useEffect(() => {
    let currentChannel;
    Twilio.getClient()
      .then((client) => client.getConversationBySid(channelId))
      .then((channel) => {
        currentChannel = channel;
        return setChannelEvents(channel);
      })
      .catch((err) => console.log('err', err.message))
      .finally(() => setLoading(''))
    
      return () => { 
        if (currentChannel) {
          currentChannel.removeListener('messageAdded', handleMessageAdded);
        }
      };
  }, [channelId, setChannelEvents]);

Here you set the currentChannel (I'm using let to define the variable and then updating it once the promise resolves. You could also do this by breaking your promise chain up into awaited functions that set the currentChannel) in the useEffect function, then remove the listener from that same object in the tear down function.