# FlashList — A Faster List for React Native

> A high-performance list component from Shopify that replaces FlatList with cell recycling, achieving up to 5x better scroll performance and consistent 60 fps rendering for large datasets on both iOS and Android.

## Install

Save as a script file and run:

# FlashList — A Faster List for React Native

## Quick Use
```bash
npm install @shopify/flash-list
npx pod-install
```
```jsx
import { FlashList } from '@shopify/flash-list';
<FlashList
  data={items}
  renderItem={({ item }) => <Text>{item.title}</Text>}
  estimatedItemSize={50}
/>
```

## 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/

---
Source: https://tokrepo.com/en/workflows/asset-7b23ab1e
Author: Script Depot