CODEWITHSUNDEEP
react-nativereact-native-flatlist
Ali
Ali

Reputation: 1217

Best method to optimize performance of FlatList Items

This a simple FlatList:

class Products ..
render() {
    return (
          <FlatList
          renderItem={this._renderItem}
           );
}

I want to create a list of items and navigate to Detail Page by onPress items.

Can Please tell me which method is better?

Method 1:

Insert navigate to Detail page in child component(CardProduct component) like this:

_renderItem = ({item}) => (

    <CardProduct
      id={item.id}
      title={item.title}
    />
  );

and in CardProduct component:

render() {
    const { id,title } = this.props;

    return (
      <Card style={{flex:1}}>
          <CardItem cardBody button onPress={() => this.props.navigation.navigate('Details',{productId:id})}>
          ...
    );
}

Method 2:

Insert navigate to Detail page in current component(Products component) like this:

_onPressItem = (id: string) => {
    this.props.navigation.navigate('Details',{productId:id});
};

_renderItem = ({item}) => (

    <CardProduct
      id={item.id}
      title={item.title}
      onPressItem={this._onPressItem}
    />
  );

and in CardProduct component:

_onPress = () => {
    this.props.onPressItem(this.props.id);
};

render() {
    const { id,title } = this.props;

    return (
      <Card style={{flex:1}}>
          <CardItem cardBody button onPress={this._onPress}>
          ...
    );
}

I used to do the method 1, but I read this guide.

Upvotes: 1

Views: 876

Answers (2)

Tim
Tim

Reputation: 10719

Short answer:

You should go for method2.

Explanation:

In method1 you are using an arrow function in CardItem's onPress, so everytime CardProduct is re-rendered a new reference of onPress is created, which forces CardItem to re-render, even if all the other props are staying the same. In method 2 you are binding the function to context, which won't force a re-rendering of the CardItem.

By the way, in general it is a good idea to prevent the usage of arrow functions in render().

Upvotes: 2

Mehrzad Akhavein
Mehrzad Akhavein

Reputation: 1

One step for performance optimization in react-native flatlist, is using a stateless functional component for the renderItem. and you should always give each item a unique key.

Upvotes: 0

Related Questions