title: React Native iOS app using large amount of memory
body: <p>I'm building my first react native ios app. The main feature of this app is to make a request to a server, get data and render that in a <code>FlatList</code>. On initial load, 15 list items inside the <code>FlatList</code> are rendered, and when the user scrolls down, 15 more are added each time the user gets to the bottom of the list. The total number of list items that are rendered is 500.</p>
  
  <p>I've been profiling my app with Instruments and while it seems there are no memory leaks, the app is using a massive amount of memory for just rendering a list.</p>
  
  <p>In the image below from Instruments, you can see the total number of allocations (over 3 million), as well as the total bytes and persistent bytes. The monitoring below only lasted just over a minute, and each step up you see in the graph is when the user reached the bottom of the list, and more data was loaded. </p>
  
  <p>In 1 minute, there was over 700MiB of memory used, with 178MiB being persistent. This seems way to high for a simple <code>FlatList</code>. Am I misinterpreting something?</p>
  
  <p><a href="https://i.stack.imgur.com/38lzS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/38lzS.png" alt="instruments"></a></p>
  
  <p>Below is the <code>render()</code> method of my <code>FlatList</code>:</p>
  
  <pre><code>render() {
    // If loading, render activity indicator
    if (this.props.isLoadingPosts) {
      return (
        &lt;View style={commonStyles.center}&gt;
          &lt;ActivityIndicator /&gt;
        &lt;/View&gt;
      );
    }
    // Otherwise render posts
    return (
      &lt;View&gt;
        &lt;FlatList
          style={styles.fullHeight}
          data={this.props.data}
          extraData={this.props.loadingMore}
          keyboardShouldPersistTaps='always'
          keyExtractor={(item, index) =&gt; index.toString()}
          ItemSeparatorComponent={this.renderSeparator}
          ListFooterComponent={this.renderFooter}
          refreshing={this.props.refreshing}
          onRefresh={this.onRefresh}
          onEndReached={this.onEndReached}
          onEndReachedThreshold={0.5}
          renderItem={({ item }) =&gt; (
            &lt;ListItem
              item={item}
              onPressItem={() =&gt; this.showPost(item)}
              navigator={this.props.navigator}
            /&gt;
          )}
        /&gt;
      &lt;/View&gt;
    );
  }
  </code></pre>
  
  <p>I'm not sure what could be causing such a high memory usage. I'm using redux and redux-persist to store and mutate data, but the most insensitive function is making the request to the server. Does anyone knows how to reduce or fix this large memory consumption?</p>