SectionList: React Native'de bölüm yapısı ve API nedir

SectionList nedir?

SectionList, mantıksal bölümlere gruplanmış verileri görüntülemek için bir React Native bileşenidir. Her bölümün bir başlığı ve öğe listesi vardır, alfabetik sıradaki kişiler, kategoriye göre menüler, tarihe göre siparişler için idealdir. Bileşen, VirtualizedList üzerine inşa edilmiştir ve sanallaştırmanın tüm avantajlarını devralır.

SectionList, React Native 0.43'te FlatList ile birlikte tanıtılmış ve o zamandan beri kategorize edilmiş listeler için standart haline gelmiştir. Meta'ya (2026) göre, React Native projelerinin %40'ı yapılandırılmış verileri düzenlemek için SectionList kullanmaktadır. FlatList içinde manuel gruplamanın aksine, SectionList yerleşik bölüm desteği sağlar.

Ana kullanım senaryoları

SectionList, her harfin ayrı bir bölüm olduğu alfabetik indeksli kişi listelerinde kullanılır. E-ticarette, bileşen ürünleri kategoriye veya markaya göre gruplar. Not alma uygulamalarında — tarihe veya etiketlere göre. Ayarlar ekranlarında — bölümlere göre (Genel, Güvenlik, Bildirimler).

React Native kullanım araştırmasına (Meta, 2026) göre, SectionList her biri 3-20 öğe içeren 5-50 bölümle en etkilidir. Daha az bölüm olduğunda, ListHeaderComponent aracılığıyla gruplama ile FlatList kullanmak daha basittir. Daha fazla bölüm olduğunda, çok sayıda başlık nedeniyle performans sorunları ortaya çıkar.

Veri yapısı ve bölümler

SectionList Data, her biri bir title (bölüm başlığı) ve data (öğe dizisi) içeren Section nesnelerinden oluşan bir dizi kabul eder. İsteğe bağlı olarak, her bölüm için ayrı ayrı key ve renderItem geçirilerek ortak renderItem geçersiz kılınabilir.

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

renderSectionHeader, bölüm nesnesini alan bölüm başlığını oluşturma işlevidir. renderItem, FlatList'e benzer öğe oluşturma işlevidir. Bileşen, her bölümün alt kısmı için renderSectionFooter'ı da destekler.

<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 ve bölüm gezintisi

Sticky headers, SectionList'in önemli bir özelliğidir. Kullanıcı kaydırdığında, mevcut bölümün başlığı, bölüm tamamen kaydırılana kadar ekranın üst kısmına yapışır. Bu, kullanıcıya mevcut kategori hakkında sürekli bağlam sağlar.

Yapışkan mod varsayılan olarak etkindir. Devre dışı bırakmak için stickySectionHeadersEnabled={false} kullanın. iOS'te başlıklar yerel animasyonla yapışır; Android'de JS işleme yoluyla. Alfabetik rehberler için, hızlı gezinme için harflerle bir yan panel eklemek uygundur.

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, herhangi bir bölüme programlı gezinme için bir yöntemdir. sectionIndex, itemIndex ve viewPosition (0 — başlangıç, 0.5 — orta, 1 — son) kabul eder. Yan alfabetik indeksle birleştirildiğinde, standart iOS kişilerinde olduğu gibi hızlı gezinme uygulanabilir.

SectionList performans optimizasyonu

SectionList optimizasyonu, FlatList optimizasyonuyla aynı prensipleri izler, bölümlerle ilgili ek nüanslarla birlikte. Her bölüm başlığı, kaydırma sırasında oluşturulan ve yeniden oluşturulan ek bir View'dir. 50+ bölüm olduğunda, başlıklar kaydırmayı yavaşlatabilir.

Gereksiz yeniden oluşturmaları önlemek için renderSectionHeader ve renderItem için React.memo kullanın. Bölümler dinamik olarak değişmiyorsa, bölüm dizisi için useMemo kullanmayı düşünün. Çok büyük listeler için, başlıklar ve öğeler için sabit yükseklik belirterek SectionList'i getItemLayout ile birleştirin.

SectionList vs FlatList: ne zaman ne seçilmeli

SectionList ve FlatList arasındaki seçim veri yapısına bağlıdır. Veriler düz bir dizi ise — FlatList kullanın. Veriler doğal olarak başlıklarla kategorilere ayrılıyorsa — SectionList kullanın. Tek bir bölüm için SectionList kullanmayın — FlatList daha verimli çalışacaktır.

Aynı sayıda öğeyle performans farkı minimumdur. SectionList, başlıkları oluşturmak için ek yük ekler, ancak başlıklar anlam taşıdığında bu ek yük haklıdır. Başlıklar gerekli değilse — bölümleri simüle etmek için ListHeaderComponent ile FlatList daha hızlı olacaktır.

Seçim kriterleri

SectionList kullanın: veriler varsayılan olarak gruplanmışsa (harfe göre kişiler), sticky headers gerekiyorsa, bölüm başlıkları etkileşimli öğeler (düğmeler, onay kutuları) içeriyorsa. FlatList kullanın: veriler düzse, gruplama dinamik olarak değişiyorsa, 50'den fazla kategori varsa ve başlıklar tek tipteyse.

SectionList uygulama örnekleri

SectionList alfabetik indeksle birlikte klasik bir kullanım durumudur. Uygulama, harflerle bir yan panel ve bir bölüme atlamak için scrollToLocation içerir. Aşağıda, alfabetik gezinmeli bir kişi listesinin tam uygulaması bulunmaktadır.

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

Önemli: bölümleri dinamik olarak filtrelerken, diziyi stabilize etmek için useMemo kullanın. Bellekte saklama olmadan, SectionList her filtre değişikliğinde tüm hücreleri yeniden oluşturacak ve kaydırma konumu ile iç içe bileşenlerin durumu kaybolacaktır.