title: How to listen to real-time updates in Firestore without re-rendering the queried data array on every update
body: <p>I have a collection of documents I am querying, sorting by 'count' ,and listening to real-time updates on. However, every time any document (e.g. 'count') updates, the entire array of documents re-renders and re-sorts by 'count'. I'd like to listen for updates but avoid re-rendering the array every update.</p>
  
  <p>Here's a simplified version of the request I'm making. 'queriedData' is what I'll loop through in the JSX.</p>
  
  <pre><code> useEffect(() =&gt; {
      const unsubscribe = firebase
        .firestore()
        .collection("someCollection")
        .orderBy("count", "desc")
        .onSnapshot(collection =&gt; {
          const newArray = [];
          collection.forEach(document =&gt; {
            const { name, count } = document.data();
            newArray.push({
              key: document.id,
              name,
              count
            });
          });
          setQueriedData(newArray); // &lt;-- array in the JSX
        });
      return () =&gt; {
        unsubscribe();
      };
    }, [queriedData]);
  </code></pre>
  
  <p>I've thought of trying to change how I present the array of queried data, but idk how to loop through queried Firestore data without first putting it into an array like I've done here.</p>