I am currently using firestore/firebase for my BAAS and am working on getting some data back from a collection. I have the data rendering and communicating properly however I cannot figure out how to clean up my effect hook properly.

I've read that firestore has a built in way to do it with the onsnapshot function but I cannot figure it out.

Here is the actual API call to the firestore database:

  getBuds: async (uid) => {
    try {
      const snapshot = await db
        .collection('users')
        .doc(uid)
        .collection('buds')
        .get();
      return snapshot.docs.map((doc) => doc.data());
    } catch (error) {
      console.log('Error @getBuds ', error);
    }
  },

And here is the effect function where it's called:

useEffect(() => {
    firebase
      .getBuds(user.uid)
      .then((res) => setBuds(res))
      .catch((err) => console.log(err));
  }, [buds]);

Please help me with my cleanup!!! I would really appreciate it

UPDATE** So I have modified the original code using the onsnapshot function and am managing to pull down the data I want from fire store, I am getting each document and pushing each one into an array with this code. However I cant seem to now get this code into the component where I call the "getBuds" method :(

Here is the updated getBuds:

getBuds: async (uid) => {
    let unsubscribe;

    try {
      const budData = [];

      unsubscribe = await db
        .collection('users')
        .doc(uid)
        .collection('buds')
        .onSnapshot((snapshot) => {
          snapshot.forEach((doc) => {
            budData.push(doc.data());
          });
          console.log(budData);
          return budData;
        });
    } catch (error) {
      console.log('Error @getBuds ', error);
    }
  },