What is Shopify's FlashList architecture, and what does it improve over FlatList?

Short answer

FlashList recycles existing native view cells and replaces only their contents (cell recycling) instead of destroying and creating new components while scrolling.

Explanation

FlatList creates new items and destroys old ones while scrolling, which can cause blank spaces during fast scrolling and ongoing memory pressure. FlashList uses cell recycling, as in Android RecyclerView and iOS UICollectionView, reusing the same views with new content. Version 1 required estimatedItemSize, but FlashList v2 (built for the new architecture) measures items automatically. Improvement varies by list and device, so measure it in your app instead of relying on general figures.

Code example

import { FlashList } from "@shopify/flash-list";

function ProductFeed({ items }: { items: Product[] }) {
  return (
    <FlashList
      data={items}
      renderItem={({ item }) => <ProductRow item={item} />}
      getItemType={(item) => item.kind}   // recycle only cells of the same type
      // FlashList v1 only: estimatedItemSize={100}
    />
  );
}

Common mistakes

• Ignoring getItemType when a list contains different cell types, causing mismatched cells to be recycled and losing the benefit.
• Using v1 without setting estimatedItemSize close to the real height, confusing scroll calculations.

Follow-up questions

• What does removeClippedSubviews do, and when can enabling it be a double-edged sword?

Sources

• FlashList — documentation