I am implementing a products directory using Firebase & React but there's something I just can't understand when I query my products. My landing page contains 4 tiles for the 4 main categories of products and I want to fetch the 3 most popular products for each category. For now I invoke 4 components which contain this function :

const [products, setProducts] = useState([]);

  async function fetchProducts() {
    const q = query(
      collection(db, "products"),
      where("category", "==", props.slug),
      orderBy("votes", "desc"),
      limit(3)
    );
    const querySnapshot = await getDocs(q);
    const prod = [];
    querySnapshot.forEach((doc) => {
      prod.push(doc.data());
    });
    setProducts(prod);
  }
  useEffect(() => {
    fetchProducts();
  });

My code works but I can't figure out the tremendous amount of reads anytime I hit npm run to test my code. There are only 5 products in the db but running my code on localhost for around 5 minutes generated 45k reads... any idea why that is ? Thanks a lot !