React Native - Use a keyExtractor with FlatList

Question

I have been getting the:

\"VirtualizedList: missing keys for items, make sure to specify a key property on an item or provide a custom keyExtractor\"
         


        

Answer 1

The importance of this error is at the point where you start to change or delete any of the objects of your array because of how your list will get updated if you don't provide that key.

The way React Native deals with a change to your list without a key is to delete everything visible on the screen and then looks at the new array of data and renders a single element for each one.

We don't want React Native to rebuild an entire list just because of one small change to the array of data. Ideally, we want React Native to detect specifically the object we deleted or changed and update accordingly, but that will not happen if we do not provide the key.

The key property allows React Native to track these list of objects and that way it can keep track of what you are modifying or deleting and just delete that particular element with a particular key.

This way the list does not need to be rebuilt from scratch. The key will allow React Native to tie the definition of an object of data with some element that appears on the screen.

Its just allowing React Native to track the different list of objects we are rendering to the screen. Its also a performance optimization on making updates to our list.