SectionList: ano ito, istraktura ng seksyon at API sa React Native

Ano ang SectionList?

SectionList — React Native component para sa pagpapakita ng data na naka-grupo sa mga lohikal na seksyon. Bawat seksyon ay may heading at listahan ng mga elemento, mainam para sa mga contact ayon sa alpabeto, mga menu ayon sa kategorya, mga order ayon sa petsa. Ang component ay binuo sa ibabaw ng VirtualizedList at nagmamana ng lahat ng mga bentahe ng virtualisasyon.

Ang SectionList ay lumitaw kasama ng FlatList sa React Native 0.43 at mula noon ay naging pamantayan para sa mga naka-kategoryang listahan. Ayon sa data ng Meta (2026), 40% ng mga proyekto sa React Native ay gumagamit ng SectionList para sa pag-oorganisa ng naka-istrukturang data. Hindi tulad ng manu-manong pag-grupo sa loob ng FlatList, ang SectionList ay nagbibigay ng built-in na suporta para sa mga seksyon.

Pangunahing mga sitwasyon ng paggamit

SectionList ay ginagamit sa mga listahan ng contact na may alpabetikong index, kung saan ang bawat letra ay hiwalay na seksyon. Sa e-commerce, ang component ay nag-grupo ng mga produkto ayon sa kategorya o brand. Sa mga note-taking app — ayon sa petsa o tags. Sa mga setting — ayon sa seksyon (Basic, Seguridad, Mga Notipikasyon).

Ayon sa pananaliksik ng paggamit ng React Native (Meta, 2026), ang SectionList ay pinaka-epektibo sa 5–50 seksyon na may 3–20 elemento bawat isa. Sa mas kaunting bilang ng mga seksyon, mas madaling gamitin ang FlatList na may pag-grupo sa pamamagitan ng ListHeaderComponent. Sa mas maraming seksyon — lumilitaw ang mga problema sa pagganap dahil sa malaking bilang ng mga heading.

Istraktura ng data at mga seksyon

SectionList Data ay tumatanggap ng array ng mga Section object, bawat isa ay naglalaman ng title (heading ng seksyon) at data (array ng mga elemento). Bukod pa rito, maaaring magpasa ng key at renderItem para sa bawat seksyon nang hiwalay, na nag-o-override sa pangkalahatang renderItem.

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

renderSectionHeader — function ng rendering ng heading ng seksyon na tumatanggap ng object ng seksyon. renderItem — function ng rendering ng elemento, katulad ng FlatList. Sinusuportahan din ng component ang renderSectionFooter para sa ibabang bahagi ng bawat seksyon.

<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 at nabigasyon sa mga seksyon

Sticky headers — pangunahing tampok ng SectionList. Kapag nag-i-scroll ang user, ang heading ng kasalukuyang seksyon ay dumidikit sa itaas na gilid ng screen hanggang sa ganap na ma-scroll ang seksyon. Ito ay nagbibigay sa user ng patuloy na konteksto tungkol sa kasalukuyang kategorya.

Ang sticky mode ay naka-enable bilang default. Para i-disable, gamitin ang stickySectionHeadersEnabled={false}. Sa iOS, ang mga heading ay dumidikit na may native na animation, sa Android — sa pamamagitan ng JS. Para sa mga alpabetikong sanggunian, maginhawang magdagdag ng side panel na may mga letra para sa mabilis na nabigasyon.

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 — paraan para sa programmatic na nabigasyon sa anumang seksyon. Tumatanggap ng sectionIndex, itemIndex at viewPosition (0 — simula, 0.5 — gitna, 1 — dulo). Sa pamamagitan ng pagsasama nito sa alpabetikong side index, maaaring ipatupad ang mabilis na nabigasyon tulad ng sa karaniwang iOS contacts.

Pag-optimize ng pagganap ng SectionList

Pag-optimize ng SectionList ay sumusunod sa parehong mga prinsipyo ng pag-optimize ng FlatList, na may mga karagdagang nuances na may kaugnayan sa mga seksyon. Bawat heading ng seksyon ay karagdagang View na nire-render at nire-render muli habang nag-i-scroll. Sa 50+ seksyon, ang mga heading ay maaaring magpabagal ng pag-scroll.

Gamitin ang React.memo para sa renderSectionHeader at renderItem upang maiwasan ang hindi kinakailangang pag-re-render. Kung ang mga seksyon ay hindi nagbabago nang dynamic, isaalang-alang ang useMemo para sa array ng sections. Para sa napakalaking listahan, pagsamahin ang SectionList sa getItemLayout, na tumutukoy ng nakapirming taas ng mga heading at elemento.

SectionList vs FlatList: kailan pipiliin ang alin

Ang pagpili sa pagitan ng SectionList at FlatList ay depende sa istraktura ng data. Kung ang data ay flat array — gamitin ang FlatList. Kung ang data ay natural na nag-grupo sa mga kategorya na may mga heading — SectionList. Huwag gumamit ng SectionList para sa isang seksyon — ang FlatList ay magiging mas mahusay.

Ang pagkakaiba sa pagganap ay minimal sa parehong bilang ng mga elemento. Ang SectionList ay nagdaragdag ng overhead sa rendering ng mga heading, ngunit ang overhead na ito ay makatwiran kapag ang mga heading ay may kahulugan. Kung hindi kailangan ang mga heading — ang FlatList na may ListHeaderComponent para sa simulation ng mga seksyon ay magiging mas mabilis.

Mga pamantayan sa pagpili

Gamitin ang SectionList kapag: ang data ay naka-grupo bilang default (mga contact ayon sa letra), kailangan ang sticky headers, ang mga heading ng seksyon ay naglalaman ng mga interactive na elemento (mga button, checkbox). Gamitin ang FlatList kapag: ang data ay flat, ang pag-grupo ay nagbabago nang dynamic, ang bilang ng mga kategorya ay higit sa 50 at ang mga heading ay pare-pareho.

Mga halimbawa ng implementasyon ng SectionList

SectionList na may alpabetikong index — klasikong halimbawa ng paggamit. Ang implementasyon ay may kasamang side panel na may mga letra at scrollToLocation para tumalon sa seksyon. Sa ibaba ay ang kumpletong implementasyon ng contact list na may alpabetikong nabigasyon.

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

Mahalaga: sa dynamic na pag-filter ng mga seksyon, gamitin ang useMemo para sa pag-stabilize ng array. Kung walang memoization, ang SectionList ay muling lilikha ng lahat ng cell sa bawat pagbabago ng filter, na humahantong sa pagkawala ng pag-scroll at estado ng mga nested component.