SectionList: یہ کیا ہے، سیکشن کا ڈھانچہ اور API React Native میں

SectionList کیا ہے؟

SectionList React Native کا ایک جزو ہے جو منطقی سیکشنز میں گروپ کردہ ڈیٹا دکھاتا ہے۔ ہر سیکشن میں ایک ہیڈر اور عناصر کی فہرست ہوتی ہے، جو حروف تہجی کے مطابق رابطوں، زمرے کے لحاظ سے مینیو، تاریخ کے لحاظ سے آرڈرز کے لیے مثالی ہے۔ یہ جزو VirtualizedList پر بنایا گیا ہے اور ورچوئلائزیشن کے تمام فوائد حاصل کرتا ہے۔

SectionList کو React Native 0.43 میں FlatList کے ساتھ متعارف کرایا گیا تھا اور تب سے یہ زمرہ بند فہرستوں کے لیے معیار بن گیا ہے۔ 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 کی اصلاح کے same اصولوں پر عمل کرتی ہے، سیکشنز سے متعلق اضافی باریکیوں کے ساتھ۔ ہر سیکشن ہیڈر ایک اضافی View ہے جو اسکرول کرتے وقت رینڈر اور دوبارہ رینڈر ہوتا ہے۔ 50+ سیکشنز ہونے پر، ہیڈرز اسکرول کو سست کر سکتے ہیں۔

غیر ضروری دوبارہ رینڈرنگ سے بچنے کے لیے renderSectionHeader اور renderItem کے لیے React.memo استعمال کریں۔ اگر سیکشنز متحرک طور پر تبدیل نہیں ہوتے، تو سیکشنز کی صف کے لیے useMemo پر غور کریں۔ بہت بڑی فہرستوں کے لیے، ہیڈرز اور عناصر کی مقررہ اونچائی بتاتے ہوئے SectionList کو getItemLayout کے ساتھ جوڑیں۔

SectionList بمقابلہ FlatList: کب کیا منتخب کریں

SectionList اور FlatList کے درمیان انتخاب ڈیٹا کے ڈھانچے پر منحصر ہے۔ اگر ڈیٹا ایک flat صف ہے — FlatList استعمال کریں۔ اگر ڈیٹا قدرتی طور پر ہیڈرز کے ساتھ زمروں میں گروپ ہوتا ہے — SectionList استعمال کریں۔ ایک سیکشن کے لیے SectionList استعمال نہ کریں — FlatList زیادہ مؤثر طریقے سے کام کرے گا۔

آئٹمز کی same تعداد کے ساتھ کارکردگی کا فرق کم سے کم ہے۔ SectionList ہیڈرز رینڈر کرنے میں اضافی بوجھ ڈالتا ہے، لیکن یہ بوجھ جائز ہے جب ہیڈرز معنی رکھتے ہوں۔ اگر ہیڈرز کی ضرورت نہیں ہے — سیکشنز کی نقلی کے لیے ListHeaderComponent کے ساتھ FlatList تیز ہوگا۔

انتخاب کا معیار

SectionList استعمال کریں جب: ڈیٹا بطور ڈیفالٹ گروپ ہو (حرف کے لحاظ سے رابطے)، sticky headers کی ضرورت ہو، سیکشن ہیڈرز میں متعامل عناصر (بٹن، چیک باکس) ہوں۔ FlatList استعمال کریں جب: ڈیٹا flat ہو، گروپنگ متحرک طور پر تبدیل ہو، 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 ہر فلٹر تبدیلی پر تمام خلیات دوبارہ بنائے گا، جس سے اسکرول پوزیشن اور nested اجزاء کی حالت ضائع ہو جائے گی۔