Skip to content
Related Articles

Related Articles

When we use ScrollView over FlatList or vice-versa ?

Improve Article
Save Article
  • Last Updated : 14 Jul, 2021
Improve Article
Save Article

ScrollView: The ScrollView Component is an inbuilt react-native component that serves as a generic scrollable container, with the ability to scroll child components and views inside it.

When to use ScrollView?

ScrollView loads all the content, i.e. the data to be displayed on screen all at once. This is done immediately after the component is loaded. Thus, the entire content (data list) is mounted altogether. Now if this data list contains many items, it would 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.

Flatlist: The FlatList Component is an inbuilt react-native component that displays similarly structured data in a scrollable list. It shows only those elements that are currently being displayed on the screen.

When to use FlatList?

As opposed to the ScrollView, the FlatList renders only those elements that are currently being displayed on the screen (default: 10 items). Thus, it does not have any impact on the performance of the application. So, it is preferable to use the FlatList Component to display a large list of data. 

Key differences between ScrollView and Flatlist are:

It does not provide any memory management.It provides automatic memory management.
It loads all the content at once.It loads content as the window scrolled.
It results in slow rendering and increased memory usage.It does not affect the rendering speed. 
It maintains the component state.It does not maintain the component state.
It renders generic content in a scrollable container.It renders a list of similar items.
Can be imported from react native as: 
import {ScrollView} from ‘react-native’;
Can be imported from React Native as: 
import {FlatList} from ‘react-native’;
My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!