Loading…
Instant Performance Upgrade: From FlatList to FlashList
2023-10-18
- Source
- Shopify
- Published
- Added to Yomu
Summary
Shopify’s React Native Foundations team created FlashList as a faster, easier alternative to React Native’s FlatList, targeting frame drops, blank cells, and high memory use across a wide range of devices. FlatList creates new views during updates, while FlashList recycles already-allocated cells and moves some layout operations to native, using a 250-pixel default buffer to reduce memory footprint and load times. Its API is nearly the same as FlatList, so an existing list can be swapped by changing the component name and optionally adding estimatedItemSize, with features such as type-specific recycling, flexible column spans, and FPS and blank-cell metrics. Extensive Android testing found performance of 60 FPS or greater even on low-end devices, and Shopify Mobile uses FlashList as its default while Shop moved search to it.
Context
FlatList can produce frame drops, blank items, and high memory use, particularly on lower-end devices and when rendering complex or frequently updated content. Shopify also needed a performant list component that would support its move from native lists to React Native while remaining simple for developers to use.
Approach / What changed
FlashList builds on RecyclerListView while retaining a FlatList-like API. It recycles existing allocated views instead of generating new ones, moves some layout operations to native, uses a smaller default buffer of 250 pixels, and adds type-specific recycling pools, flexible column spans, and performance metrics. The team used FPS and blank-cell measurements, with extensive Android testing across device capabilities.
Takeaways
- FlashList recycles cells and moves some layout work to native, reaching 60 FPS or greater in testing even on low-end Android devices.
- The default 250-pixel buffer uses fewer rendered items than FlatList’s larger buffer, reducing memory footprint and improving load times and responsiveness.
- Migration can require only changing the component name and optionally adding estimatedItemSize; additional features include getItemType, flexible column spans, and performance metrics.