Ionic React - useEffect

I’m not sure if this is the right place to post this, but I’m very confused about how useEffect works in Ionic.

Is it of value to unsubscribe from an event stream via the standard React Hooks cleanup method?

What confuses me is the documentation around useIonWillEnter && useIonWillLeave.

I’m noticing that the useEffect cleanup works fine, but are there performance trade-offs that I’m missing?

For anyone who is having similar questions, this is for you!

To dive into some code I’ll show you what I was struggling with and how I was ultimately able to solve it. I’m not sure if this is the right way, but it worked for me so it may just work for you! :wink:

In normal react, this is how I would write a firebase/firestore subscription:

  useEffect(() => {
    const sub = firebase.firestore()
        .collection('accounts')
        .where('user_id', '==', userId)
        .onSnapshot(handleChange);
    // Cleanup now...
    return sub;
  }, [userId])

Ionic React
I noticed in the documentation that the Ionic Team has clearly spelled out that they’ve included new lifecycle methods to work with their version of react-router. So I proceeded to write this:

  useIonViewWillEnter(() => {
      const sub = firebase.firestore()
        .collection('accounts')
        .where('user_id', '==', currentUser.uid)
        .onSnapshot(handleChange);
      setListener(() => {
            return sub;
      });
  });

  useIonViewWillLeave(() => {
    if(listener) {
      console.log(listener);
      listener();
    }
  })

I thought this was pretty straight forward at this point… It seems like “Hey I’m doing my job. No memory leaks!”

Well… It wasn’t so simple. See it looks like useIonViewWillLeave won’t keep track of values unless you declare dependencies like in a useEffect. So the final version looked like this:

  useIonViewWillEnter(() => {
      const sub = firebase.firestore()
        .collection('accounts')
        .where('user_id', '==', currentUser.uid)
        .onSnapshot(handleChange);
      setListener(() => {
            return sub;
      });
  });

  useIonViewWillLeave(() => {
    if(listener) {
      console.log(listener);
      listener();
    }
    // This is what made the world of difference and now
    // we're unsubscribing from firestore! Yay!
  }, [listener])

Thanks for reading along! You now know everything I know about lifecycles in Ionic. :fire:

i am wondering why you are subscribing to querying the current user any way? Also I think it might be more efficient to just get the document you are looking for instead of doing a query?

That… that is a great point! Changing it now.

Thanks so much @aaronksaunders!

Oh whoops. No accounts are actually in reference to accounts at merchants. Sorry for the confusion there.

So it needs to be a query as you can have multiple accounts at different merchants.