SectionList: Displaying Grouped Data Efficiently
SectionList renders long lists grouped into sections, like a contact list. It virtualizes content, rendering only visible items to save memory. A common footgun: it won't re-render on external state changes unless you pass that state via the `extraData` prop.
WHY IT EXISTS Rendering a long list of items can cripple an app's performance if every item is rendered at once. While React Native's FlatList solves this for simple lists, many UIs need data grouped into logical sections, like a contact list alphabetized or a menu categorized by course. SectionList was built for this exact, common use case.
THE MENTAL MODEL Think of SectionList as a FlatList with an added layer for grouping. Instead of a flat array of data, you provide an array of section objects. Each section object contains its own title and an array of items. SectionList then handles rendering the section headers and the items within each section in a memory-efficient way.
HOW IT WORKS SectionList is a performant wrapper around VirtualizedList. It renders only a small window of items that can fit on the screen, plus a few extra as a buffer. As you scroll, it recycles views, rendering new items just before they appear and unmounting items that have scrolled far off-screen. This virtualization keeps memory usage low. Because it's a PureComponent for performance, it only re-renders on prop changes. If your rendering logic depends on state outside the list data, you must pass it to the extraData prop to force an update.
WHEN TO USE IT Use SectionList for long, scrollable lists where data is naturally grouped. It's perfect for a phone's contact list grouped by the first letter, a settings screen grouped by category, or a restaurant menu grouped by appetizers, entrees, and desserts. It's the go-to for performant, sectioned data.
WHEN NOT TO USE IT If your list data is not sectioned, use the simpler FlatList component. If your list is short and performance is not a concern, a simple map inside a ScrollView might suffice. Don't use SectionList if you need to preserve the internal state of list items as they scroll off-screen, as virtualization unmounts them.
ONE CANONICAL EXAMPLE To display a menu, your sections prop would be an array like [{title: 'Main Courses', data: ['Pizza', 'Burger']}, {title: 'Desserts', data: ['Ice Cream', 'Cake']}]. You would provide a renderItem function to style each food string and a renderSectionHeader function to style the 'Main Courses' and 'Desserts' titles.
Read the original → reactnative.dev
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.