Better List Views
Article Summary
React Native just killed ListView. The new list components solve memory leaks, stale rows, and ignored bugs that plagued mobile developers for years.
React Native's March 2017 release (0.43-rc.1) introduced a complete overhaul of list rendering with FlatList, SectionList, and VirtualizedList. These components replace the problematic ListView and DataSource APIs with simpler, more performant alternatives built for production apps.
Key Takeaways
- Nearly constant memory usage regardless of list size through virtualization
- FlatList simplifies basic lists to just data array and renderItem function
- SectionList handles heterogeneous data with different renderers per section
- Built-in pull-to-refresh, scroll loading, and multi-column support included
- Items outside render window completely unmount, reclaiming JS and native memory
Critical Insight
The new list components deliver constant memory performance and simpler APIs, but require external state management since unmounted items lose internal state.
