SectionList: шта је то, структура секција и API у React Native

Шта је SectionList?

SectionList — компонента React Native за приказ података груписаних у логичке секције. Свака секција има заглавље и листу елемената, што је идеално за контакте по абецеди, меније по категоријама, поруџбине по датумима. Компонента је изграђена на VirtualizedList и наслеђује све предности виртуелизације.

SectionList се појавио заједно са FlatList у React Native 0.43 и од тада је стандард за категоризоване листе. Према Meta подацима (2026), 40% пројеката на React Native користи SectionList за организовање структурираних података. За разлику од ручног груписања унутар FlatList, SectionList пружа уграђену подршку за секције.

Основни сценарији употребе

SectionList се примењује у контакт листама са абецедним индексом, где је свако слово посебна секција. У e-commerce компонента групише производе по категоријама или брендовима. У апликацијама за белешке — по датумима или ознакама. У подешавањима — по секцијама (Основно, Безбедност, Обавештења).

Према истраживању употребе React Native (Meta, 2026), SectionList је најефикаснији при 5–50 секција са 3–20 елемената у свакој. При мањем броју секција једноставније је користити FlatList са груписањем преко ListHeaderComponent. При већем — јављају се проблеми са перформансама због великог броја заглавља.

Структура података и секције

SectionList Data прима низ Section објеката, од којих сваки садржи title (заглавље секције) и data (низ елемената). Додатно, могу се преносити key и renderItem за сваку секцију посебно, замењујући општи renderItem.

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

renderSectionHeader — функција рендеровања заглавља секције, која прима објекат секције. renderItem — функција рендеровања елемента, аналогна FlatList. Компонента такође подржава renderSectionFooter за доњи део сваке секције.

<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 и навигација по секцијама

Sticky headers — кључна карактеристика SectionList. Када корисник скролује, заглавље тренутне секције се лепи за горњу ивицу екрана док се секција потпуно не скролује. Ово пружа кориснику сталан контекст о тренутној категорији.

Sticky режим је подразумевано укључен. За искључивање користите stickySectionHeadersEnabled={false}. На iOS заглавља се лепе са изворном анимацијом, на Android-у — преко JS. За абецедне именике згодно је додати бочни панел са словима за брзу навигацију.

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 — метод за програмску навигацију до било које секције. Прима sectionIndex, itemIndex и viewPosition (0 — почетак, 0.5 — центар, 1 — крај). Комбинујући са бочним абецедним индексом, може се имплементирати брза навигација као у стандардним iOS контактима.

Оптимизација перформанси SectionList

Оптимизација SectionList следи исте принципе као оптимизација FlatList, са додатним нијансама везаним за секције. Свако заглавље секције је додатни View који се рендерује и поново рендерује при скроловању. При 50+ секција заглавља могу успорити скроловање.

Користите React.memo за renderSectionHeader и renderItem да бисте избегли непотребна поновна рендеровања. Ако се секције не мењају динамички, размотрите useMemo за низ sections. За веома велике листе комбинујте SectionList са getItemLayout, наводећи фиксну висину заглавља и елемената.

SectionList vs FlatList: када шта изабрати

Избор између SectionList и FlatList зависи од структуре података. Ако подаци представљају равни низ — користите FlatList. Ако се подаци природно групишу у категорије са заглављима — SectionList. Немојте користити SectionList за једну секцију — FlatList ће бити ефикаснији.

Разлика у перформансама је минимална при истом броју елемената. SectionList додаје overhead на рендеровање заглавља, али је овај overhead оправдан када заглавља носе значај. Ако заглавља нису потребна — FlatList са ListHeaderComponent за имитацију секција биће бржи.

Критеријуми избора

Користите SectionList када: подаци су подразумевано груписани (контакти по словима), потребни су sticky headers, заглавља секција садрже интерактивне елементе (дугмад, checkbox). Користите FlatList када: подаци су равни, груписање се мења динамички, категорија има више од 50 и заглавља су истоветна.

Примери имплементације SectionList

SectionList са абецедним индексом — класичан пример употребе. Имплементација укључује бочни панел са словима и scrollToLocation за скок до секције. Испод је потпуна имплементација контакт листе са абецедном навигацијом.

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

Важно: при динамичком филтрирању секција користите useMemo за стабилизацију низа. Без мемоизације SectionList ће поново стварати све ћелије при свакој промени филтера, што доводи до губитка скроловања и стања угњеждених компоненти.