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-এ, হেডারগুলো native অ্যানিমেশনের সাথে আটকে থাকে; 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 প্রতিটি ফিল্টার পরিবর্তনে সব কোষ পুনরায় তৈরি করবে, যা স্ক্রোল অবস্থান এবং নেস্টেড কম্পোনেন্টের অবস্থা হারাবে।