Lists — FlatList & SectionList

Never map() thousands of items inside ScrollView — it renders everything at once and crashes. FlatList virtualizes: only visible rows mount. SectionList groups data with headers.

Efficient long lists

Never map() thousands of items inside ScrollView — it renders everything at once and crashes. FlatList virtualizes: only visible rows mount. SectionList groups data with headers.

FlatList with pull-to-refresh

type Item = { id: string; title: string };

export function PostList({ data, onRefresh }: { data: Item[]; onRefresh: () => void }) {
  const [refreshing, setRefreshing] = useState(false);

  const handleRefresh = async () => {
    setRefreshing(true);
    await onRefresh();
    setRefreshing(false);
  };

  return (
    <FlatList
      data={data}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => <PostCard title={item.title} />}
      refreshControl={<RefreshControl refreshing={refreshing} onRefresh={handleRefresh} />}
      ListEmptyComponent={<Text>No posts yet</Text>}
      contentContainerStyle={{ padding: 16 }}
    />
  );
}

FlatList performance tips

Always provide keyExtractor with stable unique IDs.
Use getItemLayout when all rows have fixed height — skips measurement.
Memoize renderItem with useCallback; wrap row component in React.memo.
Avoid anonymous functions in renderItem when possible.