FlatList Performance Tuning
Apply getItemLayout for fixed-height rows, set initialNumToRender and windowSize, use keyExtractor correctly, and avoid anonymous function references in renderItem.
Why FlatList Performance Matters
FlatList is the workhorse of React Native UIs — almost every app has at least one list. A poorly configured FlatList causes dropped frames during scroll, blank cells appearing as items load, and excessive memory use that can crash the app on older devices.
FlatList is a virtualized list, meaning it only renders items currently visible on screen plus a small buffer. The challenge is configuring that buffer and the rendering pipeline so scroll feels instantaneous and does not block the JS thread.
The keyExtractor Prop
The keyExtractor prop tells FlatList how to uniquely identify each item. React uses keys for efficient reconciliation — when the list data changes, React matches new items to existing rendered components using the key, then only updates items that actually changed.
Always use a stable, unique identifier like a database ID as the key. Never use the array index — if items are added, removed, or reordered, index-based keys cause React to re-render or mis-match components.
// ❌ Index-based keys — breaks on reorder/insert
<FlatList
data={posts}
keyExtractor={(item, index) => String(index)}
renderItem={renderPost}
/>
// ✅ Stable ID-based keys
<FlatList
data={posts}
keyExtractor={(item) => item.id}
renderItem={renderPost}
/>