When do you use FlatList instead of ScrollView?

ScrollView renders all of its children immediately and keeps them mounted. That is fine for a settings screen or a short article, but for hundreds of rows it wastes memory and startup time. FlatList renders a window of items and recycles as the user scrolls.

• ScrollView: static content, few children, mixed layouts, or content that must all exist for measurement
• FlatList: homogeneous rows, large datasets, dynamic data, pull to refresh and pagination
• SectionList: grouped data with sticky or non-sticky section headers
• FlashList: very large lists where recycling performance matters

import { FlatList, Text } from "react-native";

export function Messages({ messages }: { messages: { id: string; body: string }[] }) {
  return (
    <FlatList
      data={messages}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => <Text>{item.body}</Text>}
      onEndReached={() => console.log("load more")}
      onEndReachedThreshold={0.5}
    />
  );
}

Do not nest a FlatList inside a ScrollView with the same orientation. The inner list gets an unbounded height and virtualization breaks, often with a warning. If you need mixed content, use ListHeaderComponent and ListFooterComponent on the FlatList instead.