What is the difference between FlatList and ScrollView?

Answer

Both allow scrollable content but differ fundamentally in how they render children — this makes a huge performance difference for large datasets: ScrollView: renders ALL children at once into memory, regardless of whether they're visible on screen. Pros: simple API, supports any type of content (mixed layout), supports vertical and horizontal scroll, supports zoom (pinch). Cons: poor performance with many items (all loaded upfront), high memory usage, slow initial render for large lists. Use when: content is relatively small (≤20-50 items), content is heterogeneous (not a uniform list), need pinch-to-zoom. <ScrollView> {items.map(item => <ItemComponent key={item.id} item={item} />)} </ScrollView>. FlatList: renders only items visible on screen plus a configurable window. Items outside the viewport are unmounted (or virtualized). Pros: excellent performance for large lists, constant memory usage, lazy rendering, built-in pull-to-refresh, built-in infinite scroll (onEndReached). Cons: more complex API, requires unique key (keyExtractor), can't have arbitrary non-list content easily. Use for: any list of uniform items, especially 20+ items. <FlatList data={items} keyExtractor={item => item.id.toString()} renderItem={({ item }) => <ItemComponent item={item} />} onEndReached={loadMore} onEndReachedThreshold={0.5} refreshing={isRefreshing} onRefresh={handleRefresh} />. SectionList: like FlatList but with section headers — for grouped data (contacts list with alphabetical headers).