Instant Performance Upgrade: From FlatList to FlashList
Article Summary
Shopify's React Native team just solved one of mobile development's most persistent headaches: getting lists to scroll smoothly without blank cells or frame drops.
The React Native Foundations team built FlashList, an open-source drop-in replacement for FlatList that delivers native-like performance across all devices. After seeing consistent performance issues with FlatList on lower-end Android devices, they created a solution that works seamlessly on everything from budget phones to flagship devices.
Key Takeaways
- FlashList delivers 7.5x better JavaScript FPS compared to FlatList on low-end devices
- Recycles existing views instead of creating new ones, drastically reducing memory footprint
- Nearly identical API to FlatList makes migration take seconds, not days
- Moves layout operations to native layer, eliminating UI glitches from incorrect size estimates
- Already deployed across Shopify Mobile, Shop app, and POS with measurable improvements
FlashList maintains 60+ FPS even on budget Android devices while using a fraction of the memory, with almost zero migration effort required.
About This Article
RecyclerListView, an existing third-party option, required developers to estimate item sizes ahead of time. When those estimates were wrong or items had varying heights, the entire layout would render in JavaScript and cause visible glitches.
Shopify's React Native Foundations team moved layout calculations to the native layer and added automatic size measurement. This removed the need to predict item sizes manually. They also reduced memory use by switching to a 250-pixel buffer instead of FlatList's larger pre-rendering approach.
FlashList cut memory consumption for large feeds with 200-300 items per page. Load times improved and apps stayed responsive. Users could scroll to any index without requiring items to already be loaded in the current view.