CODEWITHSUNDEEP
react-nativememory-leaksuse-effectreact-native-firebasereact-functional-component
Rover
Rover

Reputation: 768

Useeffect is leaking memory how to avoid it in firebase functions

useEffect(() => {
        auth().onAuthStateChanged(user => {
            if (user) {
                const useruid = auth().currentUser.uid
                const subscriber = firestore()
                    .collection('dailyusage')
                    .doc(useruid)
                    .collection('dailyusage')
                    .onSnapshot(documentSnapshot => {
                        getReminderlist(numberofitemstoload, false)
                    });
                return () => subscriber();
            }
        })
    }, []);

Hi, I am using this function and this indicates a memory leak, So i am not able to get that how to use this function so that it will not leak memory. So let me know how can i prevent memory leak in this.

Error i am getting

Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

Upvotes: 0

Views: 467

Answers (1)

Kshitij
Kshitij

Reputation: 380

When using useEffect you can return a function that will be run on cleanup. So in your case, you'll want something like this:

useEffect(() => {
    const unsubscribe =    auth().onAuthStateChanged(user => {
           if (user) {
               const useruid = auth().currentUser.uid
               const subscriber = firestore()
                   .collection('dailyusage')
                   .doc(useruid)
                   .collection('dailyusage')
                   .onSnapshot(documentSnapshot => {
                       getReminderlist(numberofitemstoload, false)
                   });
               return () => subscriber();
           }
       })
   //below is cleanup function
       return () => unsubscribe();

   }, []);

It might help you.

Upvotes: 1

Related Questions