React Native Infinite List Done Right

We'll briefly share our implementation of a true infinite list that properly recycle views with minimal memory footprint using React Native.

Transcript

1. React.js CONF 2016
2. React Native Infinite List Done Right Vivian Cromwell (@viviancromwell) Jacky Nguyen
3. getchop.io
4. CPU and Memory Usage
5. How is it done natively? 5 4 7 6 8 setContentOffset UITableView 5 4 7 6 8 4 5 6 7 8
6. 5 4 7 6 8 How is it done in React Native? 4 5 8 6 7 3 4 5 8 6 7 3 2
7. How is it done in Chop? 5 4 7 6 8 50 40 60 70 80 4 5 6 7 3 30 40 50 60 70 57 58 59 60 56 560 570 580 590 600
8. How to update the wait time bubble? • Update every 20 seconds • List item is NOT touched • Observable ViewModel change detection • Component forceUpdate on ViewModel change
9. • Scrollview with a fixed list of 12 fixed-height items • Absolute position for items at the right offset • List items are immutable • Virtual-DOM representation never grows in size • Minimize the scope of change detection if possible Key Points
10. Suggestion A separate FixedItemListView from React Native
11. Thanks.