title: Why is my component rendered multiple times in React-Native?
body: <p>I have a parent component (<em>uploadVimeo.js</em>), which calls a child component (<em>item.js</em>) when iterating through the list of videos.</p>
  
  <p><strong>uploadVimeo.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code> export default class UploadVimeo extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        videos: []
      }
    }
  
    async componentDidMount() {
      const videos = await AsyncStorage.getItem('imagensSelecionadas');
      const videosToJson = JSON.parse(videos);
      const videosList = videosToJson.filter((video) =&gt; video.mime === 'video/mp4')
  
      videosList.forEach((video, index) =&gt; video.id = index.toString())
      this.setState({
        videos: videosList,
      });
  
    }
  
    render() {
      return (
        (this.state.videos.length &gt; 0) &amp;&amp;
        &lt;FlatList
          data={this.state.videos}
          renderItem={({ item }) =&gt; &lt;Item key={item.id} name={item.filename} progress={0} /&gt;}
          keyExtractor={(item) =&gt; item.id}
        /&gt;
      )
    }
  }
  </code></pre>
  
  <p><strong>item.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code> class Item extends PureComponent {
    constructor(props) {
      super(props);
    }
    render() {
      const { props } = this;
      return (
        &lt;View style={{flex: 1, width: Dimensions.get("window").width, paddingHorizontal: 10 }}&gt;
          &lt;View style={styles.cardContainer}&gt;
            &lt;View style={styles.thumbnailContainer}&gt;
              &lt;Image source={{ uri: 'https://placeimg.com/640/480/any' }} style={styles.thumbnail} resizeMode='cover' resizeMethod='auto' /&gt;
            &lt;/View&gt;
            &lt;View style={styles.infoContainer}&gt;
              &lt;Text style={styles.title}&gt;{props.name || 'Novo Video'}&lt;/Text&gt;
              &lt;Bar progress={props.progress} width={null} color='#00FF9D' borderRadius={0} borderWidth={0} unfilledColor='#CCCCCC' style={styles.infoBar} /&gt;
              &lt;View style={styles.infoHeader}&gt;
                &lt;Text&gt;57 segundos restantes&lt;/Text&gt;
                &lt;Text&gt;{(props.progress * 100) || 0}%&lt;/Text&gt;
              &lt;/View&gt;
              &lt;View style={styles.actionsContainer}&gt;
                &lt;Icon.Button name='pause' backgroundColor='transparent' color='#CCC' onPress={() =&gt; startUpload()}&gt;
                  &lt;Text&gt;PAUSAR&lt;/Text&gt;
                &lt;/Icon.Button&gt;
                &lt;Icon.Button name='times-circle' backgroundColor='transparent' color='#CCC' &gt;
                  &lt;Text&gt;CANCELAR&lt;/Text&gt;
                &lt;/Icon.Button&gt;
              &lt;/View&gt;
            &lt;/View&gt;
          &lt;/View&gt;
        &lt;/View&gt;
      )
    }
  }
  </code></pre>
  
  <p>This is the content of my <em>this.state.videos</em></p>
  
  <pre class="lang-js prettyprint-override"><code>[
    {
      filename: "IMG_0011.MP4",
      hashId: "1eddbd20-aff8-11ea-b8fc-1b40f658f9c6",
      id: "0",
      isVideoYoutube: false,
      mime: "video/mp4",
      path: "file:///.../2C37F3A6-0A53-4224-9AFE-E36ECD916344.mp4",
      size: 212487,
    },
    {
      filename: "IMG_0011.MP4",
      hashId: "1eddbd20-aff8-11ea-b8fc-1b40f658f9c6",
      id: "1",
      isVideoYoutube: false,
      mime: "video/mp4",
      path: "file:///.../2C37F3A6-0A53-4224-9AFE-E36ECD916344.mp4",
      size: 212487,
    },
  ]
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/af5xs.png" rel="nofollow noreferrer">Notice the number of times my component is called</a></p>
  
  <p><a href="https://i.stack.imgur.com/H0YLg.png" rel="nofollow noreferrer">What causes this problem in rendering my component</a></p>
  
  <p>EDIT: I added the entire code sheet to make it easier to understand</p>