SectionList: o que é, estrutura de seções e API no React Native

O que é SectionList?

SectionList é um componente React Native para exibir dados agrupados em seções lógicas. Cada seção tem um cabeçalho e uma lista de itens, ideal para contatos em ordem alfabética, menus por categoria, pedidos por data. O componente é construído sobre o VirtualizedList e herda todos os benefícios da virtualização.

O SectionList foi introduzido junto com o FlatList no React Native 0.43 e desde então se tornou o padrão para listas categorizadas. De acordo com a Meta (2026), 40% dos projetos React Native usam SectionList para organizar dados estruturados. Ao contrário do agrupamento manual dentro do FlatList, o SectionList fornece suporte integrado para seções.

Principais casos de uso

SectionList é usado em listas de contatos com índice alfabético, onde cada letra é uma seção separada. No e-commerce, o componente agrupa produtos por categoria ou marca. Em aplicativos de notas — por data ou tags. Em telas de configurações — por seções (Geral, Segurança, Notificações).

De acordo com uma pesquisa de uso do React Native (Meta, 2026), o SectionList é mais eficaz com 5-50 seções contendo 3-20 itens cada. Com menos seções, é mais simples usar FlatList com agrupamento via ListHeaderComponent. Com mais seções, surgem problemas de desempenho devido ao grande número de cabeçalhos.

Estrutura de dados e seções

SectionList Data aceita um array de objetos Section, cada um contendo title (cabeçalho da seção) e data (array de itens). Opcionalmente, pode-se passar key e renderItem para cada seção separadamente, substituindo o renderItem comum.

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

renderSectionHeader é uma função para renderizar o cabeçalho da seção, recebendo o objeto da seção. renderItem é a função de renderização de itens, similar ao FlatList. O componente também suporta renderSectionFooter para a parte inferior de cada seção.

<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 e navegação por seções

Sticky headers são um recurso chave do SectionList. Quando o usuário rola, o cabeçalho da seção atual fixa-se no topo da tela até que a seção seja completamente percorrida. Isso dá ao usuário contexto constante sobre a categoria atual.

O modo sticky está ativado por padrão. Para desativá-lo, use stickySectionHeadersEnabled={false}. No iOS, os cabeçalhos fixam-se com animação nativa; no Android, através do processamento JS. Para diretórios alfabéticos, é conveniente adicionar um painel lateral com letras para navegação rápida.

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 é um método para navegação programática a qualquer seção. Aceita sectionIndex, itemIndex e viewPosition (0 — início, 0.5 — centro, 1 — fim). Combinado com um índice alfabético lateral, é possível implementar navegação rápida como nos contatos padrão do iOS.

Otimização de desempenho do SectionList

A otimização do SectionList segue os mesmos princípios da otimização do FlatList, com nuances adicionais relacionadas às seções. Cada cabeçalho de seção é uma View adicional que renderiza e re-renderiza durante a rolagem. Com 50+ seções, os cabeçalhos podem tornar a rolagem lenta.

Use React.memo para renderSectionHeader e renderItem para evitar re-renderizações desnecessárias. Se as seções não mudam dinamicamente, considere useMemo para o array de seções. Para listas muito grandes, combine SectionList com getItemLayout, especificando alturas fixas para cabeçalhos e itens.

SectionList vs FlatList: quando escolher cada um

A escolha entre SectionList e FlatList depende da estrutura dos dados. Se os dados são um array plano — use FlatList. Se os dados se agrupam naturalmente em categorias com cabeçalhos — use SectionList. Não use SectionList para uma única seção — FlatList lidará com isso de forma mais eficiente.

A diferença de desempenho é mínima com o mesmo número de itens. SectionList adiciona sobrecarga para renderizar cabeçalhos, mas essa sobrecarga é justificada quando os cabeçalhos têm significado semântico. Se os cabeçalhos não forem necessários — FlatList com ListHeaderComponent para simular seções será mais rápido.

Critérios de seleção

Use SectionList quando: os dados são agrupados por padrão (contatos por letra), sticky headers são necessários, cabeçalhos de seção contêm elementos interativos (botões, checkboxes). Use FlatList quando: os dados são planos, o agrupamento muda dinamicamente, há mais de 50 categorias e os cabeçalhos são uniformes.

Exemplos de implementação do SectionList

SectionList com índice alfabético é um caso de uso clássico. A implementação inclui um painel lateral com letras e scrollToLocation para saltar para uma seção. Abaixo está uma implementação completa de uma lista de contatos com navegação alfabética.

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>
  );
};

Importante: ao filtrar seções dinamicamente, use useMemo para estabilizar o array. Sem memoização, o SectionList recriará todas as células a cada alteração de filtro, causando perda da posição de rolagem e do estado dos componentes aninhados.