React Native's Better List Views
Original post 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
The new list components deliver constant memory performance and simpler APIs, but require external state management since unmounted items lose internal state.
Continue reading
What This Article Covers
React Native developers ran into a problem: whenever any props changed, all items in the render window would re-render. This created performance issues, especially for complex item components that didn't have proper optimization.
React Native's engineering team suggested using React best practices. Developers should implement React.PureComponent and shouldComponentUpdate in their item components to prevent unnecessary re-renders in the subtree and keep performance steady.
With the getItemLayout prop, developers can calculate row heights without actually rendering them. This makes scrollToIndex navigation smooth and improves scroll indicator accuracy without the rendering overhead.
This page summarizes “Better List Views” by React Native Blog, published Mar 13, 2017. All credit for the original work goes to the authors.
