title: Proper Way To Subscribe for Real-Time Changes on Firestore with React
body: <p>I've just started dipping some knowledge into using Firestore with React. I am looking to gain more insight on the real-time database capabilities offered by Firestore.</p>
  
  <p>The following are my code snippets in each corresponding file:</p>
  
  <p><strong>UserComponent.js</strong></p>
  
  <pre><code>import React, { Component } from 'react'
  
  class UserPage extends Component {
    constructor (props) {
      super (props)
      this.state = {
        users: []
      }
    }
  
    componentDidMount () {
      this.props.firebase.getUsers()
      .then(doc =&gt; {
        console.log('componentDidMount', 'Data Received')
        this.setState({ users: doc })
      }
    }
  
    render () {
      const { users } = this.state
      return (
        &lt;div&gt;
          &lt;h1&gt;Users&lt;/h1&gt;
          &lt;hr /&gt;
          &lt;table&gt;
            &lt;thead&gt;&lt;/thead&gt;
            &lt;tbody&gt;
              { users.map (user =&gt; (
                  &lt;tr key={user.uid}&gt;
                    &lt;td&gt;{ user.uid }&lt;/td&gt;
                    &lt;td&gt;{ user.name }&lt;/td&gt;
                  &lt;/tr&gt;
                ))
              }
            &lt;/tbody&gt;
          &lt;/table&gt;
        &lt;/div&gt;
      )
    }
  }
  </code></pre>
  
  <p><strong>Firebase.js</strong></p>
  
  <pre><code>import app from 'firebase/app'
  import 'firebase/auth'
  import 'firebase/database'
  import 'firebase/firestore'
  
  const config = {
    apiKey: process.env.REACT_APP_API_KEY,
    authDomain: process.env.REACT_APP_AUTH_DOMAIN,
    databaseURL: process.env.REACT_APP_DATABASE_URL,
    projectId: process.env.REACT_APP_PROJECT_ID,
    storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID 
  }
  
  class Firebase {
    constructor (props) {
      app.initializeApp(config)
      this.auth = app.auth()
      this.db = app.database()
      this.firestore = app.firestore()
    }
  
    getUsers = () =&gt; {
      return new Promise((resolve, reject) =&gt; {
        this.firestore.collection("users")
        .onSnapshot((snapshot) =&gt; {
          console.log('onSnapshot Called!')
          let updatedData = snapshot.docs.map(doc =&gt; doc.data())
          resolve(updatedData)
        }, reject)
      })
    }
  }
  </code></pre>
  
  <p>When I go directly to the firestore database, modify an existing user record, the console.log I have placed in the <code>getUsers</code> method right after the onSnapShot is triggered. The snapshot also contains the update set of users record on it. </p>
  
  <p>I may be missing something here (or implemented things incorrectly) as that data never reaches back the User component. I seek some guidance on making sure that when the users collection on my firestore database has changed, the listener is triggered, and the updated data will be reflected on my application's user component.</p>
  
  <p>The other question I have is that, in the original Firebase RealTime Database, there is a method called <code>off</code>, which is used to unsubscribe for changes. What would be the counterpart of this in Firestore? I assume that this needs to be placed inside the <code>ComponentWillUnmount</code> of the React component?</p>
  
  <p>Thanks,</p>