Why is this getPosts function causing major usage of reads in my firestore database?

function Home({ isAuth }) {
  const [postLists, setPostList] = useState([]);
  const postsCollectionRef = collection(db, "posts")

   useEffect(() => {
     const getPosts = async () => {
     const data = await getDocs(postsCollectionRef);
     setPostList(data.docs.map((doc) =>
     ({ ...doc.data(), id: doc.id })));
        };
        getPosts();
    });

Here is a screenshot of the console log. Db says I have over 56k reads.

>Solution :

Looks like your useEffect hook is missing a dependency array. Try replacing it with the following and see if it fixes your issue!

useEffect(() => {
     const getPosts = async () => {
     const data = await getDocs(postsCollectionRef);
     setPostList(data.docs.map((doc) =>
     ({ ...doc.data(), id: doc.id })));
        };
        getPosts();
    });
}, [])