What is the performance of FlatList and how do you optimize it for large datasets?

Why Interviewers Ask This

Interviewers ask this to evaluate whether you have the depth of knowledge needed to mentor others and lead technical decisions. The expected answer goes beyond definitions into practical implications and real-world consequences.

Answer

FlatList's performance for large datasets depends on correct configuration. With wrong settings, a 10,000-item list scrolls poorly; with correct settings, it stays buttery smooth. The rendering window: FlatList renders items in a "window" around the current scroll position. Items outside the window are unmounted (or kept but invisible — controlled by removeClippedSubviews). The window size is configurable. Critical optimization — fixed item heights: // Without this, FlatList doesn't know item heights before rendering // Must measure each item to calculate scroll position // With this, FlatList can calculate everything upfront: const ITEM_HEIGHT = 72; <FlatList getItemLayout={(data, index) => ({ length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index, })} initialScrollIndex={500} // Can jump directly without rendering all above />. Component memoization: const Item = React.memo(({ item, onPress }) => ( <TouchableOpacity onPress={() => onPress(item.id)}> <Text>{item.title}</Text> </TouchableOpacity> ), (prev, next) => prev.item.id === next.item.id && prev.onPress === next.onPress // Custom equality -- only re-render if item changes ); // Stable onPress: const handlePress = useCallback(id => navigate(id), [navigate]);. Window configuration: initialNumToRender={10} // Items rendered before scroll maxToRenderPerBatch={5} // Per batch (scroll) updateCellsBatchingPeriod={50} // ms between batches windowSize={11} // 5 pages above + current + 5 below removeClippedSubviews={true} // Unmount offscreen views. FlashList (recommended for large lists): Shopify's replacement for FlatList — 5-10x faster, no getItemLayout needed: import { FlashList } from "@shopify/flash-list"; <FlashList data={data} renderItem={renderItem} estimatedItemSize={72} />.

Pro Tip

Before answering, structure your response: one-line definition → real-world analogy → concrete example from a project. This makes even complex React Native answers easy to follow.