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.
Interview question
What common 'footgun' can prevent a SectionList from re-rendering when its display logic depends on external state changes?
- a.Not passing the external state that influences rendering to the extraData prop.Correct
- b.Forgetting to provide a unique keyExtractor for each item in the sections.
- c.Modifying the data array within a section directly instead of creating a new array reference.
- d.SectionList only re-renders when the entire component tree above it is re-rendered.
Why? this is the answer
The card explicitly states that SectionList is a PureComponent and will only re-render on prop changes. If rendering logic depends on state outside the list data, that state must be passed to the extraData prop to force an update, otherwise it's a common 'footgun'. While modifying data in place (option C) can also cause issues, the card specifically highlights extraData for external state dependencies.
Just read this? Test yourself on what you have been reading.
Read the original → reactnative.dev
- #react-native
- #component
- #list
- #performance
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on react-native — each one lists the topics its interview covers.
See open roles