JuniorTechnicalReact Native
How do you render a long list smoothly on mobile?
Try answering first
Model answer
Never render every row at once with ScrollView and map. Use a virtualized list that mounts only the rows near the viewport.
In React Native that means FlatList, or FlashList for better recycling.
Tuning tips
- Give a stable
keyExtractor(the item id, not the index). - Keep each row cheap: wrap it in
React.memoand avoid creating new inline functions or styles per row. - Provide
getItemLayoutor a fixed item height when rows have a known size, so the list skips measuring. - Adjust
windowSize,initialNumToRenderandmaxToRenderPerBatchfor your content. - Use correctly sized, cached images, because large images are a common cause of jank.
- Paginate with
onEndReachedand avoid loading thousands of items.
Verify with the performance monitor or a profiler on a real mid-range device, not only on a simulator.
Key points
- Use a virtualized list (FlatList or FlashList), not ScrollView with map
- Stable keys and memoized, cheap rows
- getItemLayout and window tuning reduce work
- Optimize images and paginate data
Likely follow-ups
- How is FlashList different from FlatList?
- How would you find which rows cause dropped frames?
Common mistakes
- Using the array index as key for a list that changes
- Testing performance only on a simulator or flagship phone