How do I use KeyExtractor in React Native?

How do I use KeyExtractor in React Native?

You can use KeyExtractor in React Native to uniquely identify items in a list. It helps optimize performance.

Can you show me a code example?

Sure! Here's a simple example:

const DATA = [
  { id: '1', title: 'Item 1' },
  { id: '2', title: 'Item 2' },
];

const renderItem = ({ item }) => <Text>{item.title}</Text>;

<FlatList
  data={DATA}
  renderItem={renderItem}
  keyExtractor={item => item.id}
/>

What happens if I don't use KeyExtractor?

If you don't use KeyExtractor, React Native may not be able to efficiently manage the list, leading to performance issues.

Are there any best practices for using KeyExtractor?

Yes, always ensure that the keys are unique and stable. Avoid using array indices as keys to prevent issues during re-renders.