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

0•

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.

主な機能

010 GitHub stars

02Layout configurations for horizontal lists, grids, and sticky section headers

03Memoization patterns for renderItem to prevent unnecessary re-renders

04Advanced view recycling logic using getItemType for multi-layout lists

05Interactive features including pull-to-refresh and infinite scroll pagination

06Optimized FlashList setup with mandatory estimatedItemSize configuration

ユースケース

01Building complex social media feeds or e-commerce product grids with varying item heights

02Migrating performance-heavy FlatList components to FlashList for better frame rates

03Implementing efficient infinite scrolling lists that fetch data as the user reaches the bottom

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ivantorresedge/molcajete.ai flashlist-patterns

For use in Claude.ai and ChatGPT

Download Skill