FlatList Data, renderItem, and keyExtractor
Pass an array to FlatList's data prop, implement renderItem to return a styled row component, and provide a keyExtractor for stable list identity.
Why FlatList Instead of ScrollView?
ScrollView renders all its children at once, which becomes slow when displaying hundreds of items. FlatList virtualizes the list — it only renders the items currently visible on screen plus a small buffer, dramatically reducing memory usage and improving scroll performance for large datasets.
The data Prop
Pass your array of items to the data prop. FlatList iterates over this array and calls renderItem for each element. The array can contain any kind of JavaScript objects. Changes to the data array trigger a re-render of affected list items.
const DATA = [
{ id: '1', name: 'Alice' },
{ id: '2', name: 'Bob' },
{ id: '3', name: 'Carol' },
];
<FlatList data={DATA} ... />All lessons in this course
- FlatList Data, renderItem, and keyExtractor
- Pull-to-Refresh and Load More
- SectionList with Headers
- Building a Contacts List App