title: React Native async (firebase) image fetch in ScrollView / FlatList / SectionList
body: <p>I have a SectionList with a lot of images that is being fetched from a firebase storage. When scrolling down it rapidly builds up a lot of warnings.</p>
  
  <p><a href="https://i.stack.imgur.com/ZXfKf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZXfKf.png" alt="enter image description here"></a></p>
  
  <p>The WebImage component looks like this:</p>
  
  <pre><code>import React, { Component } from 'react'
  import { View, Image } from 'react-native'
  import firebase from 'firebase'
  
  class WebImage extends Component {
    state = {
      imgsrc: '',
      mounted: false,
    }
  
    componentDidMount() {
      this.setState({ mounted: true })
  
      firebase
        .storage()
        .ref()
        .child(this.props.source)
        .getDownloadURL()
        .then(url =&gt; {
          if (this.state.mounted) {
            this.setState({ imgsrc: url })
          }
        })
    }
  
    componentWillUnmount() {
      this.setState({ mounted: false })
    }
  
    render() {
      ...
    }
  }
  
  export default WebImage
  </code></pre>
  
  <p>As you can see I tried to make it aware of the mounting state, but it haven't worked as expected..</p>