title: React triggering rerenders
body: <p>I'm reading data from firestore and displaying them in UI. It's working at first, then I'm getting <code>Failed to load resource: the server responded with a status of 429 ()</code> in the console. I figured react is triggering rerenders and querying data from firestore continuously. I'm using useState hook to assign data to a variable. Could someone explain why my code is doing that?</p>
  <pre><code>import { initializeApp } from &quot;firebase/app&quot;;
  import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
  import { useState } from &quot;react&quot;;
  
  const firebaseConfig = {
    //firebase config
  };
  const app = initializeApp(firebaseConfig);
  
  //Get firestore
  const db = getFirestore(app);
  
  //Function to read DB
  async function getCollection(db, colName) {
    const dataCol = collection(db, colName);
    const dataSnapshot = await getDocs(dataCol);
    const DataList = dataSnapshot.docs.map(doc =&gt; doc.data());
    return DataList;
  }
  
  function App() {
    //Var to keep data
    const [data, setData] = useState([]);
  
    //Calling DB
    getCollection(db, 'SensorData')
      .then(obj =&gt; setData(obj))
      .catch(err =&gt; console.log(err))
  
    return (
      &lt;div className=&quot;App&quot;&gt;
        {/* Rendering Data */}
        {data.map((element) =&gt; 
                                &lt;div&gt;
                                  &lt;p&gt;LDR : {element.LDR}&lt;/p&gt;
                                  &lt;p&gt;PIR : {element.PIR}&lt;/p&gt;
                                &lt;/div&gt;)
        }
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>