React Native iOS app using large amount of memory

Question

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 FlatList . On initial load, 15 list items inside the FlatList 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.

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.

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.

In 1 minute, there was over 700MiB of memory used, with 178MiB being persistent. This seems way to high for a simple FlatList . Am I misinterpreting something?

Below is the render() method of my FlatList :

render() {
  // If loading, render activity indicator
  if (this.props.isLoadingPosts) {
    return (
      <View style={commonStyles.center}>
        <ActivityIndicator />
      </View>
    );
  }
  // Otherwise render posts
  return (
    <View>
      <FlatList
        style={styles.fullHeight}
        data={this.props.data}
        extraData={this.props.loadingMore}
        keyboardShouldPersistTaps='always'
        keyExtractor={(item, index) => index.toString()}
        ItemSeparatorComponent={this.renderSeparator}
        ListFooterComponent={this.renderFooter}
        refreshing={this.props.refreshing}
        onRefresh={this.onRefresh}
        onEndReached={this.onEndReached}
        onEndReachedThreshold={0.5}
        renderItem={({ item }) => (
          <ListItem
            item={item}
            onPressItem={() => this.showPost(item)}
            navigator={this.props.navigator}
          />
        )}
      />
    </View>
  );
}

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?

Answer 1

I came across give a scenario where I was supposed to render more than 5000 rows. I handle this using https://github.com/Flipkart/recyclerlistview You need to apply the logic of background fetching in the background, say you fetched first 100 rows from the web, you need to fetch next batch ie 100 rows data in the background on scroll till 80 rows.

onScroll={({nativeEvent}) => {

                            this.lastScrollPosition = nativeEvent.contentOffset.y;
                            const isToLoadNextBatch = this.currentScrollPosition(nativeEvent);
                            this.onScrollPosition(isToLoadNextBatch);

                        }}