SectionList versus FlatList for grouped data

WHAT THIS TESTS Whether you understand the data-shape contract each component expects and can recognize when content is inherently grouped, making SectionList the natural choice.

A GOOD ANSWER COVERS FlatList takes a single flat array through its data prop and renders each element with renderItem. SectionList instead takes a sections prop: an array of section objects, where each object has its own data array of items and any extra fields you need, such as a title or key. SectionList renders the items within each section using renderItem and renders a header between sections using renderSectionHeader, and it supports stickySectionHeadersEnabled so the current group's header pins to the top while scrolling. Both are virtualized. You reach for SectionList whenever the content is naturally bucketed, for example contacts grouped by first letter, settings grouped by category, or transactions grouped by date.

COMMON WRONG ANSWERS Flattening grouped data into one array and inserting fake header items in a FlatList, which loses the section header API, sticky headers, and clean separation of headers from items. Putting all items in a single section, defeating the purpose. Forgetting that each section needs its own data array, not a shared one. Assuming SectionList cannot be virtualized.

LIKELY FOLLOW-UPS How do renderSectionHeader and renderSectionFooter work, and how do sticky headers behave? How do keys work across sections? When would you still prefer a flattened FlatList with type-tagged rows?

ONE CONCRETE EXAMPLE A contacts screen groups people by the first letter of their name. You build sections as an array like { title: 'A', data: [alice, andy] }, { title: 'B', data: [bob] }, and so on. SectionList renders each contact via renderItem and each letter via renderSectionHeader, with stickySectionHeadersEnabled so the current letter stays pinned. Compared to faking this in a FlatList, you get the pinned headers and clean grouping for free.