SectionList: apa itu, struktur seksi dan API di React Native

Apa itu SectionList?

SectionList — komponen React Native untuk menampilkan data yang dikelompokkan dalam seksi logis. Setiap seksi memiliki judul dan daftar elemen, ideal untuk kontak berdasarkan abjad, menu per kategori, pesanan per tanggal. Komponen dibangun di atas VirtualizedList dan mewarisi semua keunggulan virtualisasi.

SectionList muncul bersama FlatList di React Native 0.43 dan sejak itu menjadi standar untuk daftar terkategorisasi. Menurut data Meta (2026), 40% proyek React Native menggunakan SectionList untuk mengatur data terstruktur. Berbeda dengan pengelompokan manual di dalam FlatList, SectionList menyediakan dukungan bawaan untuk seksi.

Skenario penggunaan utama

SectionList diterapkan dalam daftar kontak dengan indeks alfabet, di mana setiap huruf adalah seksi terpisah. Di e-commerce, komponen mengelompokkan produk berdasarkan kategori atau merek. Di aplikasi catatan — berdasarkan tanggal atau tag. Di pengaturan — berdasarkan seksi (Dasar, Keamanan, Notifikasi).

Menurut penelitian penggunaan React Native (Meta, 2026), SectionList paling efektif pada 5–50 seksi dengan 3–20 elemen per seksi. Dengan jumlah seksi yang lebih sedikit, lebih mudah menggunakan FlatList dengan pengelompokan melalui ListHeaderComponent. Dengan lebih banyak seksi — muncul masalah performa karena banyaknya judul.

Struktur data dan seksi

SectionList Data menerima array objek Section, masing-masing berisi title (judul seksi) dan data (array elemen). Selain itu, key dan renderItem dapat diberikan untuk setiap seksi secara terpisah, menggantikan renderItem umum.

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

renderSectionHeader — fungsi rendering judul seksi yang menerima objek seksi. renderItem — fungsi rendering elemen, mirip dengan FlatList. Komponen juga mendukung renderSectionFooter untuk bagian bawah setiap seksi.

<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 dan navigasi antar seksi

Sticky headers — fitur utama SectionList. Saat pengguna menggulir, judul seksi saat ini menempel ke tepi atas layar hingga seksi sepenuhnya digulir. Ini memberikan konteks konstan kepada pengguna tentang kategori saat ini.

Mode sticky aktif secara default. Untuk menonaktifkan, gunakan stickySectionHeadersEnabled={false}. Di iOS, judul menempel dengan animasi native, di Android — melalui JS. Untuk buku referensi alfabet, nyaman untuk menambahkan panel samping dengan huruf untuk navigasi cepat.

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 — metode untuk navigasi terprogram ke seksi mana pun. Menerima sectionIndex, itemIndex, dan viewPosition (0 — awal, 0.5 — tengah, 1 — akhir). Dengan menggabungkannya dengan indeks alfabet samping, navigasi cepat seperti di kontak standar iOS dapat diimplementasikan.

Optimasi performa SectionList

Optimasi SectionList mengikuti prinsip yang sama dengan optimasi FlatList, dengan nuansa tambahan terkait seksi. Setiap judul seksi adalah View tambahan yang dirender dan di-render ulang saat pengguliran. Pada 50+ seksi, judul dapat memperlambat pengguliran.

Gunakan React.memo untuk renderSectionHeader dan renderItem untuk menghindari rendering ulang yang tidak perlu. Jika seksi tidak berubah secara dinamis, pertimbangkan useMemo untuk array sections. Untuk daftar yang sangat besar, gabungkan SectionList dengan getItemLayout, menentukan tinggi tetap judul dan elemen.

SectionList vs FlatList: kapan memilih apa

Pilihan antara SectionList dan FlatList tergantung pada struktur data. Jika data adalah array datar — gunakan FlatList. Jika data secara alami dikelompokkan ke dalam kategori dengan judul — SectionList. Jangan gunakan SectionList untuk satu seksi — FlatList akan lebih efisien.

Perbedaan performa minimal pada jumlah elemen yang sama. SectionList menambahkan overhead pada rendering judul, tetapi overhead ini dibenarkan ketika judul memiliki makna. Jika judul tidak diperlukan — FlatList dengan ListHeaderComponent untuk simulasi seksi akan lebih cepat.

Kriteria pemilihan

Gunakan SectionList ketika: data dikelompokkan secara default (kontak per huruf), sticky headers diperlukan, judul seksi berisi elemen interaktif (tombol, checkbox). Gunakan FlatList ketika: data datar, pengelompokan berubah secara dinamis, jumlah kategori lebih dari 50 dan judul seragam.

Contoh implementasi SectionList

SectionList dengan indeks alfabet — contoh penggunaan klasik. Implementasi mencakup panel samping dengan huruf dan scrollToLocation untuk melompat ke seksi. Di bawah ini adalah implementasi lengkap daftar kontak dengan navigasi alfabet.

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

Penting: saat pemfilteran dinamis seksi, gunakan useMemo untuk menstabilkan array. Tanpa memoization, SectionList akan membuat ulang semua sel pada setiap perubahan filter, yang menyebabkan hilangnya pengguliran dan status komponen bersarang.