Differentiate ScrollView and FlatList

Technology CommunityCategory: React NativeDifferentiate ScrollView and FlatList
VietMX Staff asked 3 years ago
  • 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).