FlashList — A Faster List for React Native

Introduction

FlashList is a drop-in replacement for React Native's FlatList that uses cell recycling to dramatically reduce memory allocations during scrolling. Developed by Shopify, it addresses the common jank and blank-cell problems that plague FlatList with large or complex datasets.

What FlashList Does

• Recycles off-screen cells instead of creating and destroying them during scroll
• Maintains a minimal number of mounted components regardless of list length
• Provides automatic item size estimation with optional override for precise layout
• Supports horizontal, vertical, grid, and masonry layouts
• Reports blank area metrics via onBlankArea for performance monitoring

Architecture Overview

FlashList uses a RecyclerListView core that maintains a pool of rendered cells. When a cell scrolls off-screen, its React component is re-used for a newly visible item by updating its props rather than unmounting and remounting. This recycling approach reduces garbage collection pressure and keeps the JS thread free for smooth 60 fps scrolling. The estimatedItemSize prop guides initial layout before items are measured.

Self-Hosting & Configuration

• Replace FlatList imports with FlashList for an API-compatible migration
• Provide estimatedItemSize (required) based on average item height/width
• Use overrideItemLayout for heterogeneous lists with multiple item types
• Set drawDistance to control how far off-screen items are pre-rendered
• Configure numColumns for grid layouts with automatic cell sizing

Key Features

• Cell recycling eliminates mount/unmount churn for buttery-smooth scrolling
• Blank area tracking via onBlankArea callback helps identify performance bottlenecks
• Built-in support for sticky headers, item separators, and list header/footer
• MasonryFlashList component for Pinterest-style variable-height grid layouts
• Compatible with Reanimated for animated list item transitions

Comparison with Similar Tools

• FlatList (built-in) — creates new cells on scroll; FlashList recycles them for lower memory use
• SectionList — grouped variant of FlatList; FlashList handles sections via overrideItemLayout
• RecyclerListView — the underlying engine; FlashList adds a React-friendly API on top
• @tanstack/virtual — web-focused virtualization; FlashList is optimized for React Native

FAQ

Q: Is it a true drop-in replacement for FlatList? A: Mostly. The API matches FlatList with the addition of the required estimatedItemSize prop.

Q: What is the estimatedItemSize prop? A: An approximate height (or width for horizontal lists) of each item in pixels. It helps FlashList pre-calculate layout before actual measurement.

Q: Does it support variable-height items? A: Yes. FlashList measures items dynamically. For better performance with mixed sizes, use overrideItemLayout.

Q: How much faster is it than FlatList? A: Shopify reports up to 5x fewer blank cells and significantly lower JS thread usage on production-scale lists.

Sources

• https://github.com/Shopify/flash-list
• https://shopify.github.io/flash-list/