SectionList: nima, bo'limlar tuzilishi va API React Native'da

SectionList nima?

SectionList — ma’lumotlarni mantiqiy bo‘limlarda guruhlangan holda ko‘rsatish uchun React Native komponenti. Har bir bo‘lim sarlavha va elementlar ro‘yxatiga ega, bu alifbo bo‘yicha kontaktlar, kategoriyalar bo‘yicha menyular, sanalar bo‘yicha buyurtmalar uchun idealdir. Komponent VirtualizedList asosida qurilgan va virtualizatsiyaning barcha afzalliklarini meros qilib oladi.

SectionList FlatList bilan birga React Native 0.43 da paydo bo‘ldi va shu vaqtdan beri kategoriyalashtirilgan ro‘yxatlar uchun standart hisoblanadi. Meta ma’lumotlariga ko‘ra (2026), React Native loyihalarining 40% i tuzilgan ma’lumotlarni tashkil qilish uchun SectionList dan foydalanadi. FlatList ichida qo‘lda guruhlashdan farqli o‘laroq, SectionList bo‘limlarning ichki qo‘llab-quvvatlanishini ta’minlaydi.

Asosiy foydalanish stsenariylari

SectionList alifbo ko‘rsatkichiga ega kontakt ro‘yxatlarida qo‘llaniladi, bu yerda har bir harf alohida bo‘limdir. E-commerce-da komponent mahsulotlarni kategoriyalar yoki brendlar bo‘yicha guruhlaydi. Eslatma ilovalarida — sanalar yoki teglar bo‘yicha. Sozlamalarda — bo‘limlar bo‘yicha (Asosiy, Xavfsizlik, Bildirishnomalar).

React Native foydalanish tadqiqotiga ko‘ra (Meta, 2026), SectionList har birida 3–20 element bo‘lgan 5–50 bo‘limda eng samarali hisoblanadi. Kamroq bo‘limlar sonida ListHeaderComponent orqali guruhlash bilan FlatList dan foydalanish osonroq. Ko‘proq bo‘limlarda — ko‘p sonli sarlavhalar tufayli unumdorlik muammolari yuzaga keladi.

Ma’lumotlar tuzilishi va bo‘limlar

SectionList Data har biri title (bo‘lim sarlavhasi) va data (elementlar massivi) ni o‘z ichiga olgan Section obyektlari massivini qabul qiladi. Qo‘shimcha ravishda, har bir bo‘lim uchun alohida key va renderItem uzatilishi mumkin, umumiy renderItem ni bekor qilgan holda.

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

renderSectionHeader — bo‘lim obyektini qabul qiluvchi bo‘lim sarlavhasi render funksiyasi. renderItem — FlatList-ga o‘xshash element render funksiyasi. Komponent har bir bo‘limning pastki qismi uchun renderSectionFooter ni ham qo‘llab-quvvatlaydi.

<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 va bo‘limlar bo‘yicha navigatsiya

Sticky headers — SectionList ning asosiy xususiyati. Foydalanuvchi aylantirganda, joriy bo‘limning sarlavhasi ekranning yuqori chetiga yopishadi, bo‘lim to‘liq aylantirilgunga qadar. Bu foydalanuvchiga joriy kategoriya haqida doimiy kontekst beradi.

Sticky rejimi sukut bo‘yicha yoqilgan. O‘chirish uchun stickySectionHeadersEnabled={false} dan foydalaning. iOS da sarlavhalar native animatsiya bilan yopishadi, Android da — JS orqali. Alifbo ma’lumotnomalari uchun tez navigatsiya uchun harflar bilan yon panel qo‘shish qulay.

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 — istalgan bo‘limga dasturiy navigatsiya uchun metod. sectionIndex, itemIndex va viewPosition (0 — boshlanish, 0.5 — markaz, 1 — oxir) ni qabul qiladi. Yon alifbo indeksi bilan birlashtirib, iOS standart kontaktlaridagi kabi tez navigatsiya amalga oshirilishi mumkin.

SectionList unumdorligini optimallashtirish

SectionList optimallashtirish FlatList optimallashtirish bilan bir xil tamoyillarga asoslanadi, bo‘limlar bilan bog‘liq qo‘shimcha nuanslar bilan. Har bir bo‘lim sarlavhasi aylantirish paytida render va qayta render qilinadigan qo‘shimcha View dir. 50+ bo‘limda sarlavhalar aylantirishni sekinlashtirishi mumkin.

Keraksiz qayta renderlarning oldini olish uchun renderSectionHeader va renderItem uchun React.memo dan foydalaning. Bo‘limlar dinamik o‘zgarmasa, sections massivi uchun useMemo ni ko‘rib chiqing. Juda katta ro‘yxatlar uchun SectionList ni getItemLayout bilan birlashtiring, sarlavhalar va elementlarning qat’iy balandligini ko‘rsating.

SectionList vs FlatList: qachon nimani tanlash

SectionList va FlatList o‘rtasidagi tanlov ma’lumotlar tuzilishiga bog‘liq. Ma’lumotlar tekis massiv bo‘lsa — FlatList dan foydalaning. Ma’lumotlar tabiiy ravishda sarlavhalar bilan kategoriyalarga guruhlansa — SectionList. Bitta bo‘lim uchun SectionList dan foydalanmang — FlatList samaraliroq bo‘ladi.

Bir xil elementlar sonida unumdorlik farqi minimal. SectionList sarlavhalarni renderlashga qo‘shimcha yuk qo‘shadi, ammo bu yuk sarlavhalar ma’no kasb etganda oqlanadi. Agar sarlavhalar kerak bo‘lmasa — bo‘limlarni simulyatsiya qilish uchun ListHeaderComponent bilan FlatList tezroq bo‘ladi.

Tanlash mezonlari

SectionList dan foydalaning, qachonki: ma’lumotlar sukut bo‘yicha guruhlangan (harflar bo‘yicha kontaktlar), sticky headers kerak bo‘lsa, bo‘lim sarlavhalari interaktiv elementlarni o‘z ichiga olsa (tugmalar, checkboxlar). FlatList dan foydalaning, qachonki: ma’lumotlar tekis, guruhlash dinamik o‘zgaradi, kategoriyalar soni 50 dan ko‘p va sarlavhalar bir xil.

SectionList implementatsiyasi misollari

SectionList alifbo ko‘rsatkichi bilan — klassik foydalanish namunasi. Implementatsiya harflar bilan yon panelni va bo‘limga sakrash uchun scrollToLocation ni o‘z ichiga oladi. Quyida alifbo navigatsiyasi bilan kontakt ro‘yxatining to‘liq implementatsiyasi keltirilgan.

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

Muhim: dinamik filtrlash paytida massivni barqarorlashtirish uchun useMemo dan foydalaning. Memizatsiyasiz SectionList har bir filtr o‘zgarishida barcha hujayralarni qayta yaratadi, bu aylantirish va ichki komponentlar holatining yo‘qolishiga olib keladi.