Why should I use FlashList instead of FlatList?

FlashList is significantly faster (up to 10x) because it recycles views instead of constantly mounting and unmounting them, leading to much smoother scrolling and lower memory usage.

How do I handle different item types in one list?

Use the getItemType prop. This allows FlashList to group similar views together for recycling, which is much more efficient than recreating different layouts from scratch.

How can I improve the performance of individual list items?

Wrap your item components in React.memo and use the useCallback hook for your renderItem function to ensure that items only re-render when their specific data actually changes.

Is estimatedItemSize required for FlashList?

Yes, estimatedItemSize is a required prop. It provides the recycling engine with a hint about the size of items before they are rendered, which is crucial for calculating the scrollable area.

React Native FlashList Patterns

Name: React Native FlashList Patterns
Author: IvanTorresEdge

byIvanTorresEdge

Mobile Development

Implements high-performance scrollable lists in React Native using Shopify's FlashList library for optimized mobile performance.

关于

This skill provides production-grade implementation patterns for Shopify's FlashList, the high-performance alternative to React Native's standard FlatList. It equips Claude with the specific knowledge to handle complex list requirements—such as infinite scrolling, heterogeneous item types, and sticky headers—while maintaining a fluid 60 FPS experience. By focusing on critical optimizations like view recycling, memoization, and precise item size estimation, this skill ensures that mobile applications remain responsive even when rendering thousands of items.

主要功能

0 GitHub stars
Layout configurations for horizontal lists, grids, and sticky section headers
Memoization patterns for renderItem to prevent unnecessary re-renders
Advanced view recycling logic using getItemType for multi-layout lists
Interactive features including pull-to-refresh and infinite scroll pagination
Optimized FlashList setup with mandatory estimatedItemSize configuration

使用场景

Building complex social media feeds or e-commerce product grids with varying item heights
Migrating performance-heavy FlatList components to FlashList for better frame rates
Implementing efficient infinite scrolling lists that fetch data as the user reaches the bottom

关于

主要功能

0 GitHub stars
Layout configurations for horizontal lists, grids, and sticky section headers
Memoization patterns for renderItem to prevent unnecessary re-renders
Advanced view recycling logic using getItemType for multi-layout lists
Interactive features including pull-to-refresh and infinite scroll pagination
Optimized FlashList setup with mandatory estimatedItemSize configuration

使用场景

Building complex social media feeds or e-commerce product grids with varying item heights
Migrating performance-heavy FlatList components to FlashList for better frame rates
Implementing efficient infinite scrolling lists that fetch data as the user reaches the bottom