Firebase Reads Suddenly Spiked with 54k

Question

I am just getting my feet wet with firebase and in initial development, suddenly I get an error:

FirebaseError: Quota exceeded.

For context, I'm building a simple blog in React. It's saying the my function read problem is at "getPosts()":

import { useEffect, useState } from 'react';
import { getDocs, collection } from 'firebase/firestore';
import { db } from '../firebase-config';
import './Home.css';

const Home = () => {
  const [postList, setPostList] = useState([]);
  const postCollectionRef = collection(db, 'posts');

  useEffect(() => {
    const getPosts = async () => {
      const data = await getDocs(postCollectionRef);
      setPostList(data.docs.map(doc => ({ ...doc.data(), id: doc.id })));
    };
    getPosts();
  });
  return (
    <div className="homePage">
      {postList.map(post => {
        return (
          <div className="post">
            <div className='postHeader'>
            <div className='post-title'><h1>{post.title}</h1></div>
            <div className='post-author'><h5>{post.author.name}</h5></div>
            </div>
            <div className='post-content'>{post.postText}</div>
          </div>
        );
      })}
    </div>
  );
};

export default Home;

So as I'm searching around the settings I find this graph that completely confounds me. Maybes someone can tell me what happened here.

Graph showing reads spiking 54k at once.

Is mapping over the data this way accumulated 50k reads at once somehow?

Tomas Vancoillie Tomas Vancoillie · Accepted Answer · 2022-07-15T06:45:32

Your useEffect doesn't have a dependency array, so it will fire indefinitely. Add an empty dependency array at the end of your useEffect to only fire it on mount.

  useEffect(() => {
    (async () => {
      const { docs } = await getDocs(postCollectionRef);

      setPostList(docs.map(doc => ({ ...doc.data(), id: doc.id })));
    })();
  }, []);

Learn more about it here

Firebase Reads Suddenly Spiked with 54k

1 Answers