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?

CodePudding user response：

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