What is the difference between FlatList and ScrollView?
Why Interviewers Ask This
Interviewers use this question to quickly assess whether a candidate has the foundational knowledge required for React Native development. It reveals whether you understand the building blocks that more complex concepts rely on.
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).
Pro Tip
Demonstrate both theoretical understanding and practical experience. Say what it is, then give an example of how you actually used it in a React Native codebase.