Newbie question related to useFirestoreConnect 👋

[nemet4ndrea]

Context: Let's say we have a tabbed view where each tab shows some filtered ecommerce products. In Firebase we already have different collections for each type of products. E.g. let's assume we have 5 tabs: Products_1, .... Products_5. I've created a custom hook to fetch products for me like:

export const useGetProducts = (productType) => {
  useFirestoreConnect([{ collection: productType, storeAs: productType }]);

  const products = useSelector(({ firestore: { ordered }}) => ordered[productType]);
  const productsEmptyFlag = isEmpty(products);
  const productsLoadedFlag = isLoaded(products);

  return {
     productsEmptyFlag,
     productsLoadedFlag,
     products
  }
};

In each tab view I use my custom hook to provide me flags to show when to show a spinner or my products:

const {productsEmptyFlag, productsLoadedFlag, products} = useGetProducts("products_1");

Now If I click a lot on my tabs I see a lot of actions like: reduxFirestore/UNSET_LISTENER, reduxFirestore/SET_LISTENER and reduxFirestore/LISTENER_RESPONSE. I assume I should not useFirestoreConnect inside this hook as I call it each time I click on a tab view, but how could I know for sure my data is always up to date and to make fewer reads to db and not increase the bill? :)

Note: What approach would be better. Also if I know that only on each Monday new products are added can I somehow cache collections on users machines and not query Firebase until next Monday if users visit my website each other days? Can I use local storage or is there some better solution? I am new to React & Firebase as well and I try to learn things from the best developers and improve my code all the time.

Thanks!
🙏