SectionList: What It Is, Section Structure and API in React Native

What is SectionList?

SectionList is a React Native component for displaying data grouped into logical sections. Each section has a header and a list of items, making it ideal for contacts sorted alphabetically, menus by category, orders by date. The component is built on VirtualizedList and inherits all the benefits of virtualization.

SectionList was introduced alongside FlatList in React Native 0.43 and has since become the standard for categorized lists. According to Meta (2026), 40% of React Native projects use SectionList for organizing structured data. Unlike manual grouping inside FlatList, SectionList provides built-in section support.

Main Use Cases

SectionList is used in contact lists with alphabetical indexes, where each letter is a separate section. In e-commerce, the component groups products by category or brand. In note-taking apps — by date or tags. In settings screens — by sections (General, Security, Notifications).

According to React Native usage research (Meta, 2026), SectionList is most effective with 5-50 sections containing 3-20 items each. With fewer sections, it is simpler to use FlatList with grouping via ListHeaderComponent. With more sections, performance issues arise due to the large number of headers.

Data Structure and Sections

SectionList Data accepts an array of Section objects, each containing a title (section header) and data (array of items). Optionally, you can pass key and renderItem for each section separately, overriding the common renderItem.

const sections = [
  {
    title: 'React Native',
    data: ['FlatList', 'SectionList', 'VirtualizedList'],
  },
  {
    title: 'React',
    data: ['Hooks', 'Context', 'Suspense'],
  },
  {
    title: 'Android',
    data: ['Activity', 'Fragment', 'ViewModel'],
  },
];

renderSectionHeader is a function for rendering the section header, receiving the section object. renderItem is the item rendering function, similar to FlatList. The component also supports renderSectionFooter for the bottom of each section.

<SectionList
  sections={sections}
  keyExtractor={(item, index) => item + index}
  renderItem={({ item }) => (
    <View style={styles.item}>
      <Text>{item}</Text>
    </View>
  )}
  renderSectionHeader={({ section }) => (
    <View style={styles.sectionHeader}>
      <Text style={styles.sectionTitle}>{section.title}</Text>
    </View>
  )}
/>

Sticky Headers and Section Navigation

Sticky headers are a key feature of SectionList. When the user scrolls, the header of the current section sticks to the top of the screen until the section is fully scrolled through. This gives the user constant context about the current category.

Sticky mode is enabled by default. To disable it, use stickySectionHeadersEnabled={false}. On iOS, headers stick with native animation; on Android, through JS handling. For alphabetical references, it is convenient to add a sidebar with letters for quick navigation.

const ContactsList = () => {
  const sectionListRef = React.useRef(null);

  const scrollToSection = (index) => {
    sectionListRef.current?.scrollToLocation({
      sectionIndex: index,
      itemIndex: 0,
      viewPosition: 0,
    });
  };

  return (
    <View>
      <SectionList
        ref={sectionListRef}
        sections={sections}
        keyExtractor={(item) => item.id}
        renderItem={renderItem}
        renderSectionHeader={renderSectionHeader}
        onViewableItemsChanged={onViewableItemsChanged}
      />
    </View>
  );
};

scrollToLocation is a method for programmatic navigation to any section. It accepts sectionIndex, itemIndex, and viewPosition (0 — start, 0.5 — center, 1 — end). Combined with a sidebar alphabetical index, you can implement quick navigation like in standard iOS contacts.

SectionList Performance Optimization

SectionList optimization follows the same principles as FlatList optimization, with additional nuances related to sections. Each section header is an additional View that renders and re-renders during scrolling. With 50+ sections, headers can slow down scrolling.

Use React.memo for renderSectionHeader and renderItem to avoid unnecessary re-renders. If sections do not change dynamically, consider useMemo for the sections array. For very large lists, combine SectionList with getItemLayout, specifying fixed heights for headers and items.

SectionList vs FlatList: When to Choose What

The choice between SectionList and FlatList depends on the data structure. If the data is a flat array — use FlatList. If the data naturally groups into categories with headers — use SectionList. Do not use SectionList for a single section — FlatList will handle it more efficiently.

The performance difference is minimal with the same number of items. SectionList adds overhead for rendering headers, but this overhead is justified when headers carry semantic meaning. If headers are not needed — FlatList with ListHeaderComponent for simulating sections will be faster.

Selection Criteria

Use SectionList when: data is grouped by default (contacts by letter), sticky headers are needed, section headers contain interactive elements (buttons, checkboxes). Use FlatList when: data is flat, grouping changes dynamically, there are more than 50 categories and headers are uniform.

SectionList Implementation Examples

SectionList with an alphabetical index is a classic use case. The implementation includes a sidebar with letters and scrollToLocation for jumping to a section. Below is a full implementation of a contact list with alphabetical navigation.

const ALPHABET = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');

const AlphabetContacts = () => {
  const ref = React.useRef(null);

  const sections = React.useMemo(() =>
    ALPHABET.map(letter => ({
      title: letter,
      data: contacts.filter(c => c.name.startsWith(letter)),
    })).filter(s => s.data.length > 0),
  []);

  return (
    <View style={styles.container}>
      <SectionList
        ref={ref}
        sections={sections}
        keyExtractor={item => item.id}
        renderItem={renderContact}
        renderSectionHeader={renderHeader}
        getItemLayout={getItemLayout}
      />
      <View style={styles.sidebar}>
        {ALPHABET.map(letter => (
          <Text
            key={letter}
            onPress={() => scrollToSection(letter)}
          >{letter}</Text>
        ))}
      </View>
    </View>
  );
};

Important: when dynamically filtering sections, use useMemo to stabilize the array. Without memoization, SectionList will recreate all cells on every filter change, leading to scroll position loss and state loss in nested components.