title: Component initially mounting with value of null for variable
body: <p>This component was working fine before. I'm not exactly sure what I did to mess this up. But when the component initially mounts, the value of <code>artist</code> is null. Then - almost immediately - it is assigned to the object I expect. But before that happens I get a an error:</p>
  
  <blockquote>
    <p>Cannot read property activePreview of null</p>
  </blockquote>
  
  <p><a href="https://i.stack.imgur.com/EisiF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EisiF.png" alt="enter image description here"></a></p>
  
  <p>When I dismiss the error, the data renders correctly on the screen. So not sure why I'm getting this error at all. </p>
  
  <p><a href="https://i.stack.imgur.com/WPPpp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WPPpp.png" alt="enter image description here"></a></p>
  
  <p>Any ideas why this error is suddenly popping up? Or why <code>artist</code> is initially <code>null</code>?</p>
  
  <pre class="lang-js prettyprint-override"><code>componentDidMount = () =&gt; {
      // Get the uids of all artists user follows
      db.ref(`users/${this.props.uid}/following`).once('value', (snapshot) =&gt; {
        snapshot.forEach((childSnapshot, index) =&gt; {
          var id = childSnapshot.val().uid;
          // For each of those ids, check if the artist has an active preview
          db.ref(`users/${id}`).once('value', (snapshot) =&gt; {
            const artist = snapshot.val();
            console.log(artist);
            // If they do, add them to the activePreviews array
            if (artist.activePreview) {
              this.setState({activePreviews: this.state.activePreviews.concat(artist)})
            }
          })
        })
      })
    }
  </code></pre>