What is the performance of FlatList and how do you optimize it for large datasets?
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} />.
Previous
What is react-native-svg and when do you use it?
Next
What are React Native Security Best Practices?