Can not remove firestore listener inside a function-CodePudding

My code sample looks like following:

useEffect(() => {
    specialfunction();//listener for chat operations
}, []); 
const specialfunction = async() => {
   var mylistener = firebase.firestore()...onSnapshot((snapshot) => {
   //do something with the docs retrieved
   });
   //my unlucky try to remove the listener after I leave the screen
   return () => {
        try{
            mylistener();
            console.log("LISTENER REMOVED")
        }catch(error){console.log(error)};
    }
};

Usually, if you want to remove a firestore listener, you just call the variable you attached it to, in my example 'mylistener()'. Unluckily, my listener is not stopping. After I leave the screen and reenter it multiple times and receive a document, I notice that my listener fires multiple times. I also can not stop it outside my 'specialfunction' because it is not a database listener where I just can call the ref again and stop it, its about a firestore listener here.

I also can not put the 'mylistener' outside of the 'specialfunction', it needs to stay inside.

Can you help me to stop the 'mylistener' after I leave the screen?

CodePudding user response：

The key to this solution was another post but under a different topic. Important to understand was that you need to predefine a variable and after that overwrite it with the firestore listener. In this case you will be able to detach the listener in the return part of the 'useEffect'-Hook once you leave the screen, code looks like this now:

let mylistener;
useEffect(() => {
    specialfunction();//listener for chat operations
    return () => {
        try{
            mylistener(); //here you need to remove the listener
            console.log("LISTENER REMOVED")
        }catch(error){console.log(error)};
    }
}, []); 
const specialfunction = async() => {
   var mylistener = firebase.firestore()...onSnapshot((snapshot) => {
   //do something with the docs retrieved
   });
};

Also, 'specialfunction' doesnt need to be async but I do async calls inside this function, its up to you.

CodePudding user response：

Not particularly well-versed in firebase but if you wished to remove event listener when dealing with useEffect hook, the template should be as below

useEffect(() => {
    window.addEventListener("keyup", handleKeyUp)

    return () => window.removeEventListener("keyup", handleKeyUp)
}, [collapsed, handleKeyUp])

Notice that in your useEffect hook you need to return a function which remove event listener