CODEWITHSUNDEEP
androidreact-nativereact-native-flatlist
Facundo La Rocca
Facundo La Rocca

Reputation: 3866

ReactNative Flatlist performance optimizations

I've built a FlatList which allows the user to select between row or card view items based on a button on the header. So the button just dispatch an action, the store is modified and the viewMode changes (redux for actios and stores).

Well, the problem is about performance when the list is re-rendered, since the whole list must be rendered from the scratch, a slighty delay can be seen and it feels kind of unresponsive.

This is how the container which renders the list looks like:

render() {
  if (this.props.rowMode) {
    return (
      <FlatList
        data={this.props.items}
        renderItem={({ item }) => this._renderItemRowMode(item)}
        keyExtractor={(item, index) => index}
        initialNumToRender={8}
        getItemLayout={(data, index) => ({ length: 100, offset: 100 * index, index })}
        style={styles.container} />
    );
  }

  return (
    <FlatList
      data={this.props.items}
      renderItem={({ item }) => this._renderItemCardMode(item)}
      keyExtractor={(item, index) => index}
      initialNumToRender={8}
      numColumns={2}
      getItemLayout={(data, index) => ({ length: 300, offset: 300 * index, index })}
      style={styles.container} />
  );
}

Both items have just a couple of views and an image, and both also have a shouldComponentUpdate which is optimized to render only when it needed, like this:

Card view:

enter image description here

Row view:

enter image description here

I've also tested with the same list, but rendering one component or the other depending on the view mode.

The point is:

What kind of optimizations or strategy should I take to get a more natural and responsive list?

NOTE: I've omitted the items components for the sake of simplicity, and since they are not too complex. Feel free to ask me to include them if you think they are useful.

Environment:

Upvotes: 0

Views: 1144

Answers (1)

RANVIR GORAI
RANVIR GORAI

Reputation: 1286

initialNumToRender is not very efficient it renders more item same time because it triggers onEndReached many time, pass array of 8 element or no of element you want to initial render, then onScroll find when it reached to end then append the data accordingly.

Upvotes: 1

Related Questions