WhoBuilt

FlashList – make your lists faster now

Sep 29, 2022· 23 min· 10K views·Watch on YouTube

Speaker

Marek Fořt, a software engineer on Shopify’s React Native Foundations team, presents FlashList at React Native EU 2022, hosted by Callstack.

Why Shopify built FlashList

Fořt describes FlatList performance problems on low-end Android devices, including low frame rates and large blank areas. RecyclerListView can be fast and flexible, but he says its broad API is harder to learn and dynamic item heights can cause gaps or overlap during the first render.

How FlashList recycles cells

FlashList aims for high UI and JavaScript frame rates, fewer blank areas, and an API that is easy to adopt. Its API resembles FlatList, while its recycling pool reuses cells as users scroll instead of repeatedly creating new ones. Fořt says this can avoid creating new JavaScript objects and native views when only an item’s content changes.

Handling variable heights and measuring performance

Fořt explains that estimated item sizes can misplace items when their actual heights differ, leading to gaps or overlap. FlashList uses a native view to correct layout during the first render and supports dynamic heights. In a Moto G10 comparison, FlatList averaged 11.8 JavaScript FPS and 44 UI FPS, with nearly two seconds of JavaScript thread lock; FlashList averaged 49 and 58 FPS, with no such lock.

Adopting FlashList and avoiding a recycling pitfall

In a demo, Fořt replaces FlatList with FlashList and sets an estimated item size of 150 based on the sample data. He warns that a changing key on a top-level item component forces it to unmount and remount, defeating recycling; removing the key improves the benchmark results. The demo also shows a benchmark hook that reports frame rate and blank-area metrics.

Production use at Shopify

Fořt says Shopify’s shop app changed from nearly unusable with FlatList to snappy with only minimal blank cells on a low-end Android device. He reports FlashList is used across Shopify, Mobile, Shop, Inbox, and POS, and says Shopify considers it production-ready based on testing and community feedback.

Takeaways

  • For long lists, cell recycling can reduce repeated JavaScript object and native view creation.
  • A FlatList-like API can make switching list implementations easier for teams already using FlatList.
  • Avoid changing keys on recycled item components, since remounting can erase recycling benefits.
  • Use realistic devices and track both frame rates and blank areas when evaluating list performance.
  • Set estimated item size to guide the initial render, and recognize that a low estimate may cause extra items to render.

Mentioned in this talk

Search inside this talk

What was claimed 10

Show all 10 facts

Related talks