FlashList: A better list for React Native

Want 60fps Lists even on lower end devices and without seeing those dreaded blank cells?
Shopify has recently open-sourced FlashList, a new drop-in replacement for React Native's FlatList. In this talk, you'll learn more about how we built FlashList, why it's so fast, and how you can use it to make your lists lightning fast today.

Transcript

1. FlashList – A better list for React Native Siavash Etemadieh Staff Engineer / Core Mobile
2. 2 Shopify ❤ React Native
3. Shopify Shop Inbox POS
4. Lists 4
5. 5 We started with <FlatList/>
6. Advantages • Great API • Optimized with Virtualization • Works well in many cases 6
7. Cons • Large/Complex Lists • Low end Android experience • CPU Intensive 7
8. Shop App with FlatList
9. 9 We want everyone to enjoy Shopify
10. • maxToRenderPerBatch • removeClippedSubviews • updateCellsBatchingPeriod • initialNumToRender • windowSize 10 FlatList performance props
11. Solutions in the Community? 11
12. RecyclerListView 12
13. • It’s fast! (Recycling over Virtualisation) • Scales with large & Complex Lists • Highly customizable • Mature & Well adopted Advantages 13
14. • API is complicated • No simple solution to dynamic heights • First render layout issues Shortcomings 14
15. ⚡ FlashList 15
17. • 60/120fps fps on all devices • Developer friendly • Solve Dynamic Cell heights • Instrumentation Goals 17
18. 18 Developer friendly
19. 19 FlashList API
20. FlashList Performance
21. How is FlashList so fast? 21
22. FlatList’s Virtualisation (10 Viewports)
23. 23 FlashList (0.5 Viewports)
24. Demo
25. Photo by Vincent Camacho on Unsplash
26. 26 FlashList API
27. estimatedItemSize:number 27
30. Fixing the First Render 30
31. RecyclerListView’s first render lag
32. 32 FlashList’s
33. FlashList – No lag
34. Metrics ⚗ Test device: Motorola Moto G 10 (Snapdragon 460) 34
35. FlatList UI & JS FPS
36. FlashList UI & JS FPS
37. Instrumentation 37
38. 38 useBenchmark() - local useBlankAreaTracker() - production
39. 39 @shopify/react-native-performance @shopify/react-native-performance-lists-profiler
40. Is FlashList production ready? 40
41. Shopify Shop Inbox POS
42. What’s next? 42
43. 43 New React Native Architecture (Fabric)
44. 44 Masonry layout
45. 🌟 https://github.com/Shopify/flash-list
49. 49 Shopify ❤ React Native
50. Thank you!