How do you make a long list perform well?

List performance is usually a combination of render cost per row and the amount of layout work the list does. A FlatList only renders a window of items, but it still re-renders rows when props change and must estimate layout for items it has not measured.

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

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

const RowItem = memo(function RowItem({ title }: { title: string }) {
  return (
    <View style={{ padding: 12 }}>
      <Text>{title}</Text>
    </View>
  );
});

export function Feed({ rows }: { rows: Row[] }) {
  return (
    <FlatList
      data={rows}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => <RowItem title={item.title} />}
      getItemLayout={(_, index) => ({ length: 56, offset: 56 * index, index })}
      initialNumToRender={10}
      maxToRenderPerBatch={10}
      windowSize={7}
      removeClippedSubviews
    />
  );
}

The main levers

• Stable keys from server IDs, never array index for reorderable data
• Memoised row components with primitive props
• A single stable renderItem function, not a new closure per render
• getItemLayout when rows have a known fixed height
• Tuned windowSize, initialNumToRender and maxToRenderPerBatch
• FlashList or a native list when the dataset is very large or highly dynamic

Images inside rows are a common hidden cost. Downscale assets to the rendered size, use a caching image component, and avoid decoding full-resolution photos for thumbnails. Also avoid heavy work in renderItem, such as formatting dates or filtering arrays; precompute it once.