When to Use FlatList Over ScrollView and Vice Versa in React Native

ScrollView is a react native component that allows the user to scroll through a list of components. It is a higher-level component that does not render any visible content but instead delegates the rendering to one of its children. It is generally used to display a small amount of content that will not change frequently.

FlatList is also a react native component that is used to display a list of items. It is similar to ScrollView, but it is more efficient because it uses a more memory-efficient data structure to store the list items and it only renders the items that are currently visible on the screen.

Additionally, FlatList has the ability to perform infinite scrolling, where the user can keep scrolling and new items will be loaded as they approach the end of the list. It is generally used to display a large number of items that can change frequently, such as a list of search results.

When to Use FlatList

Although the FlatList is an in-built React Native component that serves as a generic scrollable container, FlatList renders only those elements that are currently being displayed on the screen. The default is usually 10 items. As a result of this, it does not have any impact on the performance of the application. So, when dealing with the display of large list or data sets, it is preferable to use the FlatList Component.

When to Use ScrollView

ScrollView loads all the data to be displayed on screen at once, and this is done immediately after the component is loaded. As a result, the entire content (data list) is mounted altogether.

Now if, for instance, this data list contains many items, this will automatically cause performance issues. So it is not preferred to use ScrollView if you have a hundred or a thousand items to be displayed on the screen. It is used when you have fewer data items on the list of a limited size.