React Native List Component Performance

1 post · Aug 2022 – Jul 2025

What this trail covers

Shopify has developed and enhanced FlashList, a drop-in replacement for React Native's FlatList, focusing on performance and precision. FlashList v2 is a complete rewrite leveraging React Native's New Architecture to eliminate the need for item size estimates, improve scrolling accuracy, and enhance horizontal list support. It introduces advanced scroll position maintenance, improved masonry support, and better web compatibility.

All Shopify trails

Jul 2025FlashList v2: A ground-up rewrite for React Native's New Architecture (2025) - ShopifyFlashList v2 is a complete rewrite leveraging React Native's New Architecture to eliminate item size estimates, improve scrolling accuracy, and enhance horizontal list support. It introduces advanced scroll position maintenance, improved masonry support, and better web compatibility. The rewrite removes native code dependencies and utilizes synchronous layout measurements for pixel-perfect precision and faster load times.
Mar 2024Improving Shopify App’s Performance - ShopifyThis post details the optimization of the Shopify App's performance by leveraging FlashList for LazyScrollView and horizontal lists, reducing load times by up to 50% and improving resource utilization. It also describes enabling inlineRequires in metro.config.js for a 17% launch time improvement, optimizing native module startup, freezing background components to reduce navigation time by up to 70%, enhancing the Restyle library for 5-10% speed improvement, and enabling batched state updates by default to improve screen load time by 15-30%. The post also highlights improvements in cache hit rates by 20% through resolving GraphQL cache issues and pre-warming the cache to achieve 90% cache hits for key screens.
Nov 2022Our Solution for Measuring React Native Rendering Times - ShopifyIntroduced the `@shopify/react-native-performance` library to measure React Native rendering times (app startup, navigation, screen re-renders) by injecting a marker view to determine Time To Interactive (TTI). The library models incremental render steps as 'render passes' and uses a state machine to track screen states from 'Started' to 'Unmounted'. It provides `RenderPassReport` with metrics like `timeToRender` and `timeToBootJsMillis`. Integration involves native initialization (Android/iOS) and a `PerformanceProfiler` component with `PerformanceMeasureView` wrappers in TypeScript.
Nov 2022What We Learned from Open-Sourcing FlashList - ShopifyThis post details the process and learnings from open-sourcing the FlashList React Native library. It covers the project's origin as a solution to poor list performance in the Shopify Mobile app, the team's approach to combining the best aspects of FlatList and RecyclerListView, the small team size involved, the importance of documentation, and the strategy for launching and building community around the project. It also touches on the impact of external mentions (conference talks) in driving interest and the decision to launch even before the main blog post was ready.
Aug 2022Instant Performance Upgrade: From FlatList to FlashList - ShopifyThis post details the development of FlashList, a performant React Native list component that acts as a drop-in replacement for FlatList. It addresses issues like UI frame drops and blank cells by implementing cell recycling (reusing existing views instead of generating new ones) and moving some layout operations to native code. FlashList also reduces memory footprint by using a smaller buffer and offers developer-friendly features like `getItemType`, flexible column spans, and performance metrics.
Advertisement