FlatList performance: the three things that matter
Most slow lists in React Native come down to keys, item re-renders, and fixed sizes.
Hammad Iqbal
Software Engineer
A list that scrolls smoothly with twenty items and stutters with two hundred is a very common React Native experience. Before reaching for a different library, three basic things are worth checking, and they fix most cases.
- Use stable keys, never array indexes for changing lists.
- Memoize the row component and keep its props stable.
- Give rows a known height when you can.
Stable keys
Keys let the list know which row is which when data changes. Using an index means an inserted item shifts every key, so every row looks changed. A real id keeps the work proportional to what actually changed.
Stop needless re-renders
Each row should only re-render when its own data changes. Wrap the row in memo, and avoid creating new inline functions or objects for its props on every render, since they break the comparison.
Tell the list the size
If every row has the same height, providing it through getItemLayout lets the list skip measuring and jump to positions instantly. When heights vary, keep rows simple and avoid heavy images without fixed dimensions.
Stable keys, memoized rows, and known sizes fix most list slowness before any bigger change is needed.
Have a project this kind of thinking applies to?
Tell me what you're building — I read every message myself.