Skip to content
useffect.sh
Book 30 min with a senior
Performance

FlashList

Shopify’s list, a FlatList replacement: it recycles cells instead of unmounting them, and v2 no longer asks for a size estimate.

Definition

FlashList (@shopify/flash-list) is Shopify’s high-performance list component for React Native, designed as a drop-in replacement for FlatList with the same core API (data, renderItem, keyExtractor). The difference is the strategy: FlatList, built on VirtualizedList, mounts and unmounts cells as you scroll, which costs a React render per appearance and produces blank areas during fast scrolling; FlashList recycles already-mounted cells by handing them new data, the way UICollectionView or RecyclerView do. Version 2, written for the New Architecture, drops the estimatedItemSize prop and v1’s auto layout, enables maintainVisibleContentPosition by default, and adds a masonry mode and a useRecyclingState hook to reset a recycled cell’s local state. Projects still on the old architecture stay on v1. Blank cells during a fast scroll on a mid-range Android phone are usually what leads a team to switch to it.

In a real app

Recycling changes a habit: a cell component receives new props instead of being recreated, so any local state (a useState for a toggle, an internal scroll position) survives the item change. useRecyclingState exists for that, and an item-derived key on a sub-component is the reflex to drop, since it cancels the benefit. Cells also need a stable type: getItemType separates recycling pools when a list mixes several layouts.

On Expo, the install needs no config plugin and FlashList works in Expo Go. The migration pitfall from FlatList is the estimatedItemSize prop left in the code (ignored in v2) and per-cell onLayout callbacks used for position math, which recycling makes misleading. For bulk inserts at the top of the list (loading older messages), drawDistance goes up.

What I measure before recommending a switch: a cell’s render time in the React Profiler (a heavy cell stays slow, recycled or not), renders per scroll with “Highlight updates”, and blank areas in release on a mid-range Android device. FlashList does not make up for a renderItem that computes or requires images on every render.

Sources

All 35 glossary terms

One of these is blocking your app?

30 minutes with a senior to look at the problem in your code. Free.