title: React-native, firestore: how to update component state when an instance variable changes its value
body: <p>I'm using Google Firestore as my backend with React Native.</p>
  
  <p>I created a class where I'm storing everything about firestore (methods, info, etc..) and I'm using the real-time updates (<a href="https://firebase.google.com/docs/firestore/query-data/listen" rel="nofollow noreferrer">https://firebase.google.com/docs/firestore/query-data/listen</a>) in that class:</p>
  
  <pre><code>class Fire{
    constructor() {
      this.user = {};  //is defined when the user log in
      this.userDocument = null;
    }
  
    _getRealTimeData = () =&gt; {
      const realTimeDatabaseRef = db.collection("users").doc(this.user.uid);
      realTimeDatabaseRef.onSnapshot(doc =&gt; {
        try {
          if (doc.exists) {
           this.userDocument = doc.data();
          } else {
            this.userDocument = null;
          }
        } catch (error) {
          console.log(error);
          this.userDocument = null;
        }
      });
    };
  }
  Fire = new Fire();
  export default Fire;
  </code></pre>
  
  <p>So this is working fine, whenever I update my firestore database, I automatically get the new value and store it in: 
      <code>this.userDocument</code></p>
  
  <p>The thing is that when this value changes the react-native component does not update, obviously it is because the state of that component is not updating. </p>
  
  <p>So my question is, how can I notify my component that the value of "this.userDocument" in Fire class has changed? so then I can update the state by this.setState({userDocument: Fire.userDocument}).</p>
  
  <p>Note: Right now I just get the data from "this.userDocument" in componentDidMount():</p>
  
  <pre><code>import Fire, { db } from "../../Fire";
  export default class Profile extends Component {
      state={ userDocument:null }
      componentDidMount(){
        Fire._getRealTimeData()
        this.setState({userDocument: Fire.userDocument})
      }
    render(){...whatever I render}
  }
  </code></pre>