title: Firebase firestore onSnapshot - Get real-time updates after initial data query using promises
body: <p>In order to show loading progress, I'm trying to wrap my onSnapshot call in a promise upon initial fetch. Data is loading correctly, but real-time updates are not functioning correctly.</p>
  
  <p>Is there a way implement this type of functionality using the onSnapshot method?</p>
  
  <p>Here's my initial data grab. Real-time updates functioned correctly before implementing the promise wrapper:</p>
  
  <pre><code>const [heroesArr, setHeroesArr] = useState([]);
  const db = firebase.firestore();
  const dbError = firebase.firestore.FirestoreError;
  
  useEffect(() =&gt; {
      const promise = new Promise((resolve, reject) =&gt; {
        db.collection("characterOptions")
          .orderBy("votes", "desc")
          .onSnapshot(coll =&gt; {
            const newHeroes = [];
            coll.forEach(doc =&gt; {
              const {
                name,
                votes
              } = doc.data();
              newHeroes.push({
                key: doc.id,
                name,
                votes
              });
            });
            if(dbError) {
               reject(dbError.message)
               } else {
               resolve(newHeroes);
              }
          });
      });
      promise
        .then(result =&gt; {
          setHeroesArr(result);
        })
        .catch(err =&gt; {
          alert(err);
        });
    }, [db]);
  </code></pre>
  
  <p>Again, data is being loaded to the DOM, but real-time updates are not functioning correctly.</p>