FlatList vs map react-native

Question

I have recently started using react-native and have come across the FlatList component. When using react I have always used map with an array.

I was using FlatList but there was issues when I wanted to change the flex-direction of items in the FlatList so I reverted to using map.

Here are the two examples using both methods:

map

{
    this.state.images.map(image => {
       return (
          <UsersImage key={ image } source={{ uri: image }} />
        )
    })
}

FlatList

<FlatList
    data={ this.state.images }
    renderItem={({item}) => {
        return (
            <UsersImage source={{ uri: item }} />
        )
    }}  
   keyExtractor={(item, index) => index}
/>

Can anyone explain why one should use FlatList over map or vice versa?

Answer 1

FlatList has lazy loading (it only shows what's on screen, so it can be more performant if you have a huge list). BTW you can get it to be horizontal if that's what you needed to change the flex direction for - just pass the horizontal prop (equivalent to saying horizontal={true})