I have multiple questions about FlatList that I cannot answer reading the docs.

When do I need to use listKey and when keyExtractor? Sometimes, when I have siblings FlatLists I have to specify listKey in each list, as follows:

      renderItem = (item, index) => (<View key={item.id} />)

      <FlatList
           keyExtractor={({id}) => id}
           listKey="MusicList"
           renderItem={this.renderItem}
       />

       <FlatList
           keyExtractor={({id}) => id}
           listKey="BooksList"
       />

Can I have the listKey and the keyExtractor at the same time?

What I have been thinking until now is that listKey is like a keyExtractor but for lists, and that keyExtractor identify every item in a list... Is that right?

Thank you.

I have multiple questions about FlatList that I cannot answer reading the docs.

When do I need to use listKey and when keyExtractor? Sometimes, when I have siblings FlatLists I have to specify listKey in each list, as follows:

      renderItem = (item, index) => (<View key={item.id} />)

      <FlatList
           keyExtractor={({id}) => id}
           listKey="MusicList"
           renderItem={this.renderItem}
       />

       <FlatList
           keyExtractor={({id}) => id}
           listKey="BooksList"
       />

Can I have the listKey and the keyExtractor at the same time?

What I have been thinking until now is that listKey is like a keyExtractor but for lists, and that keyExtractor identify every item in a list... Is that right?

Thank you.

• javascript
• reactjs
• react-native

1 Answer 1

keyExtractor is a function used to extract unique key for each item of a FlatList. And listKey is a unique identifier for VirtualizedList. If there are multiple VirtualizedLists at the same level of nesting within another VirtualizedList, this key is necessary for virtualization to work properly.

From the example you have posted, keyExtractor is the unique identifier of each item of the FlatLists. and listKey is the identifier of each list.