title: Variable in constructor undefined before render but visible after
body: <p>I use firebase to call for some user data, and store it in an array. Then, when I define the state, I set "noteData" to that array. However, the console.log(this.state.noteData) within the constructor returns "Array[]" and the return method does not display the series of mapped components. </p>
  
  <p>I created a button that runs this.forceUpdate() and then console.log(this.state.noteData), and this causes all the components to render properly, and the console.log() returns all the elements in the array that it should.</p>
  
  <p>I tried using .bind(this) as well as componentWillMounth(), but I cannot figure out how to ensure the state is defined before the render method runs for the first time.</p>
  
  <p>It seems like the render is running before the state has updated, and only re-rendering after the button is pressed will fix it. Additionally, I can press the forceUpdate() button many times right after loading into this screen and nothing will occur until a few seconds after. My guess is that the data is still updating during this time.</p>
  
  <pre><code>constructor(props){
  super(props);
  
  let returnArr = [];
  
  firebase
    .database()
    .ref('/users/' + firebase.auth().currentUser.uid + '/notes')
    .once('value')
    .then(snapshot =&gt; {
  
      snapshot.forEach(childSnapshot =&gt; {
        let item = childSnapshot.val();
        item.key = childSnapshot.key;
  
        returnArr.push(item);
      })
    })
  
  this.state = {
    fontPreference: firebase.auth().currentUser.fontPref,
    noteData: returnArr
  }
  
  console.log(this.state.noteData);
  }
  
   /* * * forceUpdate() button * * */      
   &lt;TouchableOpacity
       onPress={() =&gt; {
             this.forceUpdate();
             console.log(this.state.noteData)
       }}&gt;
   ...
  
   /* * * within return method of render *  * */
   &lt;ScrollView&gt;
        {this.state.noteData.map(note =&gt; {
          return &lt;NotePreview
            navigation = {this.props.navigation}
            currNoteImg={note.noteImg}
            currNoteTxt={note.noteTxt}
            noteId={note.key}
          /&gt;
        })}
   &lt;/ScrollView&gt;
  </code></pre>