FlatList re-renders its items many times

[BanidAzin]

🐛 Bug Report

When I render FlatList with simple static data array (also with dynamic array), FlatList renders renderItem many times.
For example, it first renders the first 10 items, then the first 20 (first 10 second time!), then the first 30, etc.

To Reproduce

1. Add a FlatList with some data(more than 20 items)
2. Log the FlatList renderItem function and check how much time renderItemfunction is called

Expected Behavior

The item components already rendered should be reused

Code Example

https://snack.expo.io/By_l9Jnu4

Environment

React Native Environment Info:
System:
OS: Linux 4.15 Ubuntu 18.04.2 LTS (Bionic Beaver)
CPU: (4) x64 Intel(R) Core(TM) i5-3317U CPU @ 1.70GHz
Memory: 224.72 MB / 7.68 GB
Shell: 4.4.19 - /bin/bash
Binaries:
Node: 10.8.0 - /usr/bin/node
npm: 6.8.0 - /usr/bin/npm
npmPackages:
react: 16.8.3 => 16.8.3
react-native: ^0.59.2 => 0.59.2
npmGlobalPackages:
create-react-native-app: 2.0.2
react-native-cli: 2.0.1
react-native-git-upgrade: 0.2.7

[JKCooper2]

There's a few things you aren't doing quite correctly here. Each time the render function runs you are creating a new array object for your data, so React has to rerender the entire list each time, you're renderItem function and keyExtractor function are also remade each rerender, and so the FlatList has to be rerun. You're also using the index for your key which means as soon as anything moves it will rerender everything after that point. I would recommend looking at what does/doesn't change when you rerun things (arrays, functions, object), and why the keyExtractor is important for reducing re-renders.

I've put an updated version here: https://snack.expo.io/@jkcooper/rn24206---flatlist-rerenders. You could also pull out the renderItem to a PureComponent which may help as well.

[BanidAzin]

Thank you @JKCooper2 .

[jennykortina]

@JKCooper2 I am having the same problem. here's my code in a gist

here's an image of what's going on:

when I first load the cardList component, i get 10, 12, then 278 renders from my rowRender component. There are only 68 items in the data set, so I would only expect 68 renders. I am trying to debug this b/c when I load the app on my phone, the list is frozen for a few seconds then becomes scrollable which I imagine is all these excessive renders.

as far as I can tell I'm doing things like in your example. any help would be greatly appreciated. thanks!

I'm also experiencing this issue in react-native 0.60.5.

Putting console log in the keyExtractor function, I found out that FlatList is rendering items in the given data (an array with 134 items with unique id) multiple times, causing yellow box to appear saying child in list should have a unique "key" prop.

In my case, the Flatlist seems to render index 0 to 9, and then rendering back index 0-9, then jump to index 135, before going back to index 0 to ~50, and so on, while rendering certain index numerous times, all in one run. This happen in the initial render of the list, no scrolling or anything ( in iOS Simulator )

[rgomezp]

Same problem here. I have logged "building list" in my renderItem function and I'm getting totally random number of them logged to console. Sometimes I'll get 11, other times 24. I also can't get the FlatList to re-render (although that's a different problem)

Any insight here would be very helpful.

  keyExtractor = (item, index) => item.key;

  buildList = (iter) => {
    console.log("building list");
    return (<Workout navigation={this.props.navigation} 
        exercise={iter.item} 
        updateExercises={this.updateExercises} 
        workoutAction={this.state.workoutAction}/>)
  }

  floatingActionPress = (name) => {
    switch (name) {
      case 'bt_add':
        // add new workout
        return;
      case 'bt_remove':
        this.setState({workoutAction:"remove", refreshList: !this.state.refreshList});
        return;
      case 'bt_edit':
        this.setState({workoutAction:"edit", refreshList: !this.state.refreshList});
        return;
    }
  }

  render(){
    return(
      <View style={styles.container}>
        <FilterBar/>
        <FlatList removeClippedSubviews={false} data={Object.values(this.state.filteredExercises)}
          renderItem={this.buildList}
          keyExtractor={this.keyExtractor}
          extraData={this.state.workoutAction}
        ></FlatList>
      <FloatingAction
          actions={actions}
          color={'#4841BB'}
          onPressItem={this.floatingActionPress}
        />
      ...

For reference:

• FloatingAction: https://www.npmjs.com/package/react-native-floating-action
• FlatList: https://facebook.github.io/react-native/docs/flatlist.html