53

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?

3 Answers3

79

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.

Manusha Chethiyawardhana
  • 15
  • 1
  • 8
nima
  • 7,796
  • 12
  • 36
  • 53
38

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).

alaboudi
  • 3,187
  • 4
  • 29
  • 47
  • Can you give a usage scenario where this might be relevant? – Andru Apr 02 '20 at 09:06
  • 28
    You may have issues using a FlatList if you use it to list a interactable components that manage their own state. Let's say you list a bunch of Todos where each Todo is responsible for managing its own status state ("pending" vs "done") where each Todo starts with an initial status state of "pending". If you mark a Todo as done, scroll it off the page, and then scroll it back in, it will reconstruct the item again with its initial state of " "pending". State will not be conserved If you want to use a FlatList, its important to externalize the state of the list items outside the FlatList. – alaboudi Apr 03 '20 at 01:15
  • 6
    This comment is really insightful, no one pointed it out! Thanks – RowanX May 12 '20 at 02:31
  • @alaboudi - So if we have a very very long list of todos , so clearly FlatList is not an option..like you said.. But ScrollView renders all content at once which can cause memory issues...so what's the solution to this? One comes to my mind - Pagination....any other ?? – Yusuf Aug 10 '20 at 15:13
  • @Yusuf You can definitely use a FlatList for a very long list of todos. Actually I'd actually encourage you to do so due to the memory reason you mentioned. There is no reason to paginate your data. Just be sure to maintain your state outside of the component. Do you need more direction? – alaboudi Aug 10 '20 at 17:16
  • can you explain - just be sure to maintain your state outside of the component.....? you mention that state of todo will be lost on scrolling in your earlier comments – Yusuf Aug 11 '20 at 10:02
  • 3
    Typically there are 2 "types" of React components: Stateful & Stateless. A stateful component uses internal variables to help the component achieve its goal. Those variables are flushed out when the component is unmounted. if you use a FlatList with a stateful component, the component will reset its state when it is unmounted and reconstructed onto the page. What you can do instead, is pass the state as a `prop` from an external source making the component stateless. People can manage state outside a component manually or resort to a library (like Redux) to do so. – alaboudi Aug 11 '20 at 16:26
  • You'll find more information on controlling state of components externally (so you can maintain state of a large group of items in a FlatList) with searches/reading on "controlled" vs "uncontrolled" components. The direction @alaboudi provides is correct in that the fundamental difference is props vs state. Controlled components call handlers that are passed in, for interaction, and render only in response to props. Uncontrolled components keep state internally and call no handlers. https://stackoverflow.com/questions/42522515/what-are-react-controlled-components-and-uncontrolled-components – Mike Hardy Nov 24 '21 at 16:36
24

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

gbalduzzi
  • 9,356
  • 28
  • 58
  • 1
    Nice explanation. One thing I want to ask here, what if. I have a generic page let's say of details of a City, its description, photos and also the list of places and bars on the same screen. A list of places may have 100 items max. Right now I nested FlatList in ScrollView which is throwing me a warning. What will be the best solution here? – Siraj Alam Nov 14 '19 at 11:00
  • Which warning do you get? – gbalduzzi Nov 14 '19 at 16:06
  • 1
    virtualized lists should never be nested inside plain scrollviews. – Siraj Alam Nov 14 '19 at 16:26
  • This may be useful: https://stackoverflow.com/questions/58243680/react-native-another-virtualizedlist-backed-container – gbalduzzi Nov 15 '19 at 08:23