SectionList: यह क्या है, सेक्शन संरचना और API React Native में

SectionList क्या है?

SectionList React Native का एक घटक है जो तार्किक सेक्शन में समूहित डेटा प्रदर्शित करता है। प्रत्येक सेक्शन में एक शीर्षक और तत्वों की सूची होती है, जो वर्णमाला क्रम में संपर्कों, श्रेणी के अनुसार मेनू, तिथि के अनुसार ऑर्डर के लिए आदर्श है। यह घटक VirtualizedList पर निर्मित है और वर्चुअलाइज़ेशन के सभी लाभ प्राप्त करता है।

SectionList FlatList के साथ React Native 0.43 में पेश किया गया था और तब से वर्गीकृत सूचियों के लिए मानक बन गया है। Meta (2026) के अनुसार, 40% React Native प्रोजेक्ट संरचित डेटा को व्यवस्थित करने के लिए SectionList का उपयोग करते हैं। FlatList के अंदर मैन्युअल समूहीकरण के विपरीत, SectionList अंतर्निहित सेक्शन समर्थन प्रदान करता है।

मुख्य उपयोग के मामले

SectionList वर्णमाला सूचकांक वाली संपर्क सूचियों में उपयोग किया जाता है, जहाँ प्रत्येक अक्षर एक अलग सेक्शन है। ई-कॉमर्स में, घटक उत्पादों को श्रेणी या ब्रांड के अनुसार समूहित करता है। नोट लेने वाले ऐप्स में — तिथि या टैग के अनुसार। सेटिंग्स स्क्रीन में — सेक्शन के अनुसार (सामान्य, सुरक्षा, सूचनाएँ)।

React Native उपयोग अनुसंधान (Meta, 2026) के अनुसार, SectionList 5-50 सेक्शनों के साथ सबसे प्रभावी है जिसमें प्रत्येक में 3-20 आइटम हैं। कम सेक्शनों के साथ, ListHeaderComponent के माध्यम से समूहीकरण के साथ FlatList का उपयोग करना सरल है। अधिक सेक्शनों के साथ, बड़ी संख्या में शीर्षकों के कारण प्रदर्शन समस्याएँ उत्पन्न होती हैं।

डेटा संरचना और सेक्शन

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 की एक प्रमुख विशेषता है। जब उपयोगकर्ता स्क्रॉल करता है, तो वर्तमान सेक्शन का शीर्षक स्क्रीन के शीर्ष पर चिपक जाता है जब तक कि सेक्शन पूरी तरह से स्क्रॉल न हो जाए। यह उपयोगकर्ता को वर्तमान श्रेणी के बारे में निरंतर संदर्भ देता है।

स्टिकी मोड डिफ़ॉल्ट रूप से सक्षम है। इसे अक्षम करने के लिए, 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+ सेक्शनों के साथ, शीर्षक स्क्रॉल को धीमा कर सकते हैं।

अनावश्यक पुनर्प्रदर्शन से बचने के लिए renderSectionHeader और renderItem के लिए React.memo का उपयोग करें। यदि सेक्शन गतिशील रूप से नहीं बदलते हैं, तो सेक्शन सरणी के लिए useMemo पर विचार करें। बहुत बड़ी सूचियों के लिए, शीर्षकों और तत्वों की निश्चित ऊँचाई निर्दिष्ट करते हुए SectionList को getItemLayout के साथ संयोजित करें।

SectionList बनाम FlatList: कब क्या चुनें

SectionList और FlatList के बीच चुनाव डेटा संरचना पर निर्भर करता है। यदि डेटा एक सपाट सरणी है — FlatList का उपयोग करें। यदि डेटा स्वाभाविक रूप से शीर्षकों के साथ श्रेणियों में समूहित होता है — SectionList का उपयोग करें। एकल सेक्शन के लिए SectionList का उपयोग न करें — FlatList अधिक कुशलता से काम करेगा।

समान संख्या में तत्वों के साथ प्रदर्शन अंतर न्यूनतम है। SectionList शीर्षकों को प्रदर्शित करने में ओवरहेड जोड़ता है, लेकिन यह ओवरहेड उचित है जब शीर्षक अर्थपूर्ण हों। यदि शीर्षकों की आवश्यकता नहीं है — सेक्शन अनुकरण के लिए ListHeaderComponent के साथ FlatList तेज़ होगा।

चयन मानदंड

SectionList का उपयोग करें जब: डेटा डिफ़ॉल्ट रूप से समूहित हो (अक्षर के अनुसार संपर्क), sticky headers की आवश्यकता हो, सेक्शन शीर्षकों में इंटरैक्टिव तत्व हों (बटन, चेकबॉक्स)। 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 प्रत्येक फ़िल्टर परिवर्तन पर सभी कोशिकाओं को पुनः बनाएगा, जिससे स्क्रॉल स्थिति और नेस्टेड घटकों की स्थिति खो जाएगी।