CODEWITHSUNDEEP
react-native
user11230717
user11230717

Reputation:

FlatList Vs ScrollView

What is structure different between FlatList and ScrollView in react native?

It seems to they equal to each other for scrolling view in the application, but ScrollView is very simple rather than FlatList, so when we must use FlatList in code?

Upvotes: 59

Views: 49761

Answers (5)

brianangulo
brianangulo

Reputation: 253

One more thing to note here is that although Flatlists have a performance advantage when there are many items ScrollViews will generally provide a smoother user experience since lazy loading can mean on certain instances such as large pickers a flatlist may show "pop in" of elements where a ScrollView will just render it all without any popping in. So as a general of rule of thumb don't always go for Flatlists unless you really need it

Upvotes: 0

CsAlkemy
CsAlkemy

Reputation: 366

FlatList vs scroll view

Scrollview renders all the child components at once, and that is the performance downside.

On the other hand FlatList renders items lazily, while they are about to appear.and it also removes the way of screens to save memory and performance.

Upvotes: 0

nima
nima

Reputation: 8925

There's a big difference between FlatList and ScrollView

ScrollView will load the items (data for scrolling) immediately after the component has been loaded. As a result, all data will be stored in RAM, and you will be unable to use hundreds or thousands of items in it (due to low performance).

FlatList, on the other hand, has a better solution for this problem; it will mount 10 items (by default) to the screen, and as the user scrolls the view, other items will mount. It's a significant advantage to use FlatList instead of ScrollView.

You can use ScrollView for a small number of items and FlatList for even 10000 items.

Upvotes: 89

alaboudi
alaboudi

Reputation: 3423

A really big difference that no one seems to be pointing out here is that component state is not maintained with the FlatList component but is maintained with ScrollView. This is due to the fact that ScrollView renders all the children in one go and maintains them. Meanwhile, FlatList unmounts components once they are way off the screen and recreates them from scratch once the item comes back from screen (thus state is lost).

Upvotes: 42

gbalduzzi
gbalduzzi

Reputation: 10186

They have different usages.

FlatList is built to render a large list of items. If you check the documentation, you need to pass an array of data and then render each item in the array with the renderItem callback. It is optimized to have very good performances with very large arrays because it actually only renders the items that need to be displayed at the moment.

ScrollView is built to render a generic content in a way that it scrolls when the content is bigger than the ScrollView itself. You don't pass an array of data, but you put elements inside the ScrollView in the same way you would use a normal View. Be careful however, it does not provide the same optimization of the flat list for very long content.

As a rule of thumb:

Do you need to render a list of similar items from an array? Use FlatList

Do you need to render generic content in a scrollable container? Use ScrollView

Upvotes: 25

Related Questions