When to make use of keyExtractor prop in React Native’s FlatList by Aman Mittal

In React Native, the FlatList part works effectively to render a protracted listing of information. It renders solely the gadgets are proven on the display in a scrolling listing and never all the info gadgets directly.

To render a scrollable listing of things utilizing FlatList, it’s good to cross the required information prop to the part. The information prop accepts an array of things. Every merchandise within the array represents a single merchandise within the listing. One other required prop is renderItem, which takes an merchandise from the information and renders it on the listing. This prop accepts a perform that returns the JSX to be rendered.

To show an merchandise within the scrollable listing, the FlatList part requires that every merchandise has a singular key reminiscent of an id. This secret is what permits the FlatList part (because it makes use of VirtualizedList underneath the hood) to trace the order of things within the listing. The important thing from the info array is extracted utilizing the keyExtractor prop on the FlatList part.

On this put up, let’s speak about the place you would possibly want to make use of keyExtractor and what eventualities it’s not required.

🔗

Think about the next construction of information. There are ten gadgets within the array, and every merchandise has two properties, id and title. The id is the distinctive key for every merchandise.

1const DATA_WITH_ID = [
2  {
3    id: 1,
4    title: 'quidem molestiae enim'
5  },
6  {
7    id: 2,
8    title: 'sunt qui excepturi placeat culpa'
9  },
10  {
11    id: 3,
12    title: 'omnis laborum odio'
13  },
14  {
15    id: 4,
16    title: 'non esse culpa molestiae omnis sed optio'
17  },
18  {
19    id: 5,
20    title: 'eaque aut omnis a'
21  },
22  {
23    id: 6,
24    title: 'natus impedit quibusdam illo est'
25  },
26  {
27    id: 7,
28    title: 'quibusdam autem aliquid et et quia'
29  },
30  {
31    id: 8,
32    title: 'qui fuga est a eum'
33  },
34  {
35    id: 9,
36    title: 'saepe unde necessitatibus rem'
37  },
38  {
39    id: 10,
40    title: 'distinctio laborum qui'
41  }
42];

Utilizing the FlatList part, you wish to render the title of every merchandise as proven under:

1export default perform App() {
2  const renderList = ({ merchandise }) => {
3    return (
4      <View fashion={kinds.listItem}>
5        <Textual content fashion={kinds.listItemText}>{merchandise.title}</Textual content>
6      </View>
7    );
8  };
9
10  return (
11    <View fashion={kinds.container}>
12      <FlatList information={DATA_WITH_ID} renderItem={renderList} />
13    </View>
14  );
15}

The results of the above part will show an inventory of things with none errors or warnings. As well as, the FlatList part would not require a singular key to establish every merchandise because the unique information construction already incorporates a key known as id.

Right here is the output on a tool’s display from the above snippet:

🔗

By default, the keyExtractor prop checks for properties like key and id (in that order). If any of the 2 is current within the unique information construction, it is going to be thought of a the distinctive key by the FlatList part. On this case(as within the earlier instance), you should not have to explicitly use the keyExtractor prop.

If none of them are supplied, the FlatList part will throw a warning “VirtualizedList: lacking keys for gadgets …”:

Now, let’s take into account a situation the place array of information incorporates a singular key with every listing merchandise however the identify of the distinctive secret is neither key nor id. It incorporates a singular key property with the identify of userId.

1const DATA_WITH_USER_ID = [
2  {
3    userId: 1,
4    title: 'quidem molestiae enim'
5  },
6  {
7    userId: 2,
8    title: 'sunt qui excepturi placeat culpa'
9  },
10  {
11    userId: 3,
12    title: 'omnis laborum odio'
13  },
14  {
15    userId: 4,
16    title: 'non esse culpa molestiae omnis sed optio'
17  },
18  {
19    userId: 5,
20    title: 'eaque aut omnis a'
21  },
22  {
23    userId: 6,
24    title: 'natus impedit quibusdam illo est'
25  },
26  {
27    userId: 7,
28    title: 'quibusdam autem aliquid et et quia'
29  },
30  {
31    userId: 8,
32    title: 'qui fuga est a eum'
33  },
34  {
35    userId: 9,
36    title: 'saepe unde necessitatibus rem'
37  },
38  {
39    userId: 10,
40    title: 'distinctio laborum qui'
41  }
42];

When rendering the listing, you will notice the warning on this case as a result of the FlatList part would not acknowledge the userId because the key or id identify within the unique information construction.

For customized key names reminiscent of userId within the instance above, the keyExtractor prop is used. It extracts the distinctive key identify and its worth and tells the FlatList part to trace the gadgets primarily based on that worth.

For the above array of information, modify the FlatList part and use the keyExtractor prop to extract the important thing:

1<FlatList
2  information={DATA_WITH_ID}
3  renderItem={renderList}
4  keyExtractor={merchandise => merchandise.userId}
5/>

The warning may even disappear after this step.

🔗

When utilizing a FlatList part, if the info array has a singular id or a key property, you do not want to make use of the keyExtractor prop explicitly. Nevertheless, for customized id names, use the keyExtractor prop to explicitly inform the part which distinctive key to extract.

For those who prefer to study extra about React Native, try the React Native class and Expo class pages on my weblog. You may also subscribe my publication or observe on Twitter to get updates on each time I publish a brand new article or tutorial.