Why is FlatList a much better choice than ScrollView for long lists in React Native?

Short answer

FlatList uses lazy loading and virtualization to recycle only visible items, whereas ScrollView renders and holds all list items in memory at once.

Explanation

If your list has 500 items and you use ScrollView, the system tries to create 500 native nodes immediately, consuming hundreds of megabytes and freezing the screen. FlatList renders only the visible items and a small surrounding buffer, and removes items far outside the viewport to save memory and keep scrolling smooth at 60 frames per second.

Code example

import { FlatList, Text, View } from 'react-native';

function ProductList({ items }: { items: { id: string; name: string }[] }) {
  return (
    <FlatList
      data={items}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <View style={{ padding: 16 }}>
          <Text>{item.name}</Text>
        </View>
      )}
      initialNumToRender={10}
      maxToRenderPerBatch={10}
      windowSize={5}
    />
  );
}

Common mistakes

• Using inline arrow functions inside renderItem, causing every row to rerender on each update.

Follow-up questions

• What is Shopify's FlashList architecture, and what does it improve over FlatList?
• What are the key FlatList performance settings (such as windowSize, initialNumToRender, and getItemLayout)?

Sources

• React Native docs — FlatList
• React Native docs — Using a ScrollView