In React Native, the works well to render a long list of data. It renders only the items are shown on the screen in a scrolling list and not all the data items at once. FlatList component To render a scrollable list of items using , you need to pass the required prop to the component. The prop accepts an array of items. Each item in the array represents a single item in the list. Another required prop is which takes an item from the and renders it on the list. This prop accepts a function that returns the JSX to be rendered. FlatList data data renderItem data To display an item in the scrollable list, the component requires that each item has a unique key such as an . This key is what allows the component (since it uses under the hood) to track the order of items in the list. The key from the data array is extracted using the prop on the component. FlatList id FlatList VirtualizedList keyExtractor FlatList In this post, let's talk about where you might need to use and what scenarios it is not required. keyExtractor Display a list of items using FlatList Consider the following structure of data. There are ten items in the array, and each item has two properties, and . The is the unique key for each item. id title id const DATA_WITH_ID = [
  {
    id: 1,
    title: 'quidem molestiae enim'
  },
  {
    id: 2,
    title: 'sunt qui excepturi placeat culpa'
  },
  {
    id: 3,
    title: 'omnis laborum odio'
  },
  {
    id: 4,
    title: 'non esse culpa molestiae omnis sed optio'
  },
  {
    id: 5,
    title: 'eaque aut omnis a'
  },
  {
    id: 6,
    title: 'natus impedit quibusdam illo est'
  },
  {
    id: 7,
    title: 'quibusdam autem aliquid et et quia'
  },
  {
    id: 8,
    title: 'qui fuga est a eum'
  },
  {
    id: 9,
    title: 'saepe unde necessitatibus rem'
  },
  {
    id: 10,
    title: 'distinctio laborum qui'
  }
]; Using the component, you want to render the of each item as shown below: FlatList title export default function App() {
  const renderList = ({ item }) => {
    return (
      <View style={styles.listItem}>
        <Text style={styles.listItemText}>{item.title}</Text>
      </View>
    );
  };

  return (
    <View style={styles.container}>
      <FlatList data={DATA_WITH_ID} renderItem={renderList} />
    </View>
  );
} The result of the above component will display a list of items without any errors or warnings. In addition, the component doesn't require a unique key to identify each item since the original data structure already contains a key called . FlatList id Here is the output on a device's screen from the above snippet: Using the keyExtractor prop By default, the prop checks for properties like and (in that order). If any of the two is present in the original data structure, it will be considered a unique key by the component. In this case(as in the previous example), you do not have to explicitly use the prop. keyExtractor key id FlatList keyExtractor If none of them are provided, the component will throw a warning "VirtualizedList: missing keys for items ...": FlatList Now, let's consider a scenario where an array of data contains a unique key with each list item, but the name of the unique key is neither nor . It contains a unique key property with the name of . key id userId const DATA_WITH_USER_ID = [
  {
    userId: 1,
    title: 'quidem molestiae enim'
  },
  {
    userId: 2,
    title: 'sunt qui excepturi placeat culpa'
  },
  {
    userId: 3,
    title: 'omnis laborum odio'
  },
  {
    userId: 4,
    title: 'non esse culpa molestiae omnis sed optio'
  },
  {
    userId: 5,
    title: 'eaque aut omnis a'
  },
  {
    userId: 6,
    title: 'natus impedit quibusdam illo est'
  },
  {
    userId: 7,
    title: 'quibusdam autem aliquid et et quia'
  },
  {
    userId: 8,
    title: 'qui fuga est a eum'
  },
  {
    userId: 9,
    title: 'saepe unde necessitatibus rem'
  },
  {
    userId: 10,
    title: 'distinctio laborum qui'
  }
]; When rendering the list, you will see the warning in this case because the component doesn't recognize the as the or name in the original data structure. FlatList userId key id For custom key names, such as in the example above, the prop is used. It extracts the unique key name and its value and tells the component to track the items based on that value. userId keyExtractor FlatList For the above array of data, modify the component and use the prop to extract the key: FlatList keyExtractor <FlatList
  data={DATA_WITH_ID}
  renderItem={renderList}
  keyExtractor={item => item.userId}
/> The warning will also disappear after this step. Conclusion When using a component, if the data array has a unique or a property, you do not need to use the prop explicitly. However, for custom id names, use the prop to explicitly tell the component which unique key to extract. FlatList id key keyExtractor keyExtractor If you like to learn more about React Native, check out the and pages on my blog. You can also subscribe to my or follow me on to get updates whenever I publish a new article or tutorial. React Native category Expo category newsletter Twitter Also Published Here

Twitter

2022 - HackerNoon Contributor of the Year - Low Code

2022 - Most Authentic Developer Advocate of the Year

Newsletter

Portfolio

Nominated for 2022 - HackerNoon Contributor of the Year - Low Code

Nominated for 2022 - Most Authentic Developer Advocate of the Year

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Using KeyExtractor in React Native's FlatList

Too Long; Didn't Read

Company Mentioned

Aman Mittal

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Using KeyExtractor in React Native's FlatList

Too Long; Didn't Read

Company Mentioned

Aman Mittal

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES