ScrollView
renders all its react child components at once, but this has a performance downside while FlatList
renders items lazily, when they are about to appear, and removes items that scroll way off screen to save memory and processing time.
FlatList
is built to render a large list of items. ScrollView
is built to render a generic content in a way that it scrolls when the content is bigger than the ScrollView
itself.
FlatList
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 while ScrollView
does not provide the same optimization of the flat list for very long content.
- Component state is not maintained with the
FlatList
component but component state 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).