title: How to avoid exceeding the firestore quota while using React's live re-load?
body: <p>I'm fairly new to react so I apologies if this is a basic question. I've tried looking on stack overflow, google, and Github for the errors, but didn't see many posts looking for the error or general terms around it - and none of the ones I found were helpful or directly relevant.  </p>
  
  <p>I'm using react with firebase's authentication and firestore services. I don't have any trouble working with the authentication service (in terms of reaching the daily limit), however, I've been reaching the firebase quota within the hour. This is the error I see:</p>
  
  <p><code>Unhandled Rejection (FirebaseError): Quota exceeded.</code></p>
  
  <p>I'd like to know if it's the code that's causing these excessive reads, or if there could be another culprit like the react live re-load that fires off a read for every small change I make. </p>
  
  <p>The app currently reads some data from a firestore collection and renders it to a page. Here's what the component looks like: </p>
  
  <pre><code>import React, { useState, useEffect } from 'react';
  import firebase from '../../lib/firebase';
  
  import Navbar from '../Navbar';
  import MainContainer from '../MainContainer';
  import { PostView } from '../Post';
  
  function Home({ currentUser }) {
  
    const [ posts, setPosts ] = useState([]);
  
    const signOutUser = () =&gt; firebase.auth().signOut();
  
    useEffect(() =&gt; {
      const userId = currentUser.uid;
      const db = firebase.firestore();
      const postsRef = db.collection('posts');
      const query = postsRef.where('userId', '==', userId);
      async function getData() {
        const data = await query.get();
        setPosts(data.docs.map(doc =&gt; ({ ...doc.data(), id: doc.id })));
      }
      getData();
    }, [posts, currentUser]);
  
    return (
      &lt;&gt;
        &lt;Navbar /&gt;
        &lt;MainContainer&gt;
          &lt;button onClick={signOutUser}&gt;Sign out&lt;/button&gt;
          {posts.length === 0 ? &lt;h1&gt;No posts to display&lt;/h1&gt; : '' }
          &lt;ul&gt;
            {posts.map(post =&gt; (
              &lt;li key={post.id}&gt;
                &lt;PostView post={post} /&gt;
              &lt;/li&gt;
            ))}
          &lt;/ul&gt;
        &lt;/MainContainer&gt;
      &lt;/&gt;
    )
  }
  
  export default Home;
  </code></pre>
  
  <p>The above component is rendered in full at the root of the app (if the user isn't signed in, they get redirected to the login page).</p>
  
  <p>In my understanding, the <code>useEffect</code> method loads the first time the component is mounted, and every time either <code>posts</code> or <code>currentUser</code> changes. </p>
  
  <p>I have a sneaking suspicion that I'm doing something silly, causing a large amount of data reads and resulting in this error. </p>