📋 React Native এ FlatList ও SectionList ব্যবহার (TypeScript সহ)

React Native অ্যাপে যখন বড় ডেটা লিস্ট (যেমন: user list, product list, category wise data) দেখাতে হয়, তখন সাধারণ map() ব্যবহার করলে অ্যাপ স্লো হয়ে যায়। এই সমস্যার সমাধান দেয় FlatList ও SectionList।

🔹 FlatList কী?

FlatList হলো React Native-এর একটি optimized component, যা শুধুমাত্র স্ক্রিনে যেসব আইটেম দেখা যাচ্ছে সেগুলোকেই render করে। একে বলে Virtualized List।

• Large data handle করতে পারফেক্ট
• Performance খুব ভালো
• Auto scrolling support

📌 FlatList Example (TypeScript)

import { FlatList, Text, View } from 'react-native';

type User = {
  id: string;
  name: string;
};

const users: User[] = [
  { id: '1', name: 'Rahul' },
  { id: '2', name: 'Amit' },
  { id: '3', name: 'Suman' },
];

export default function App() {
  return (
    <FlatList
      data={users}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <Text style={{ padding: 10 }}>{item.name}</Text>
      )}
    />
  );
}
  

🔹 SectionList কী?

যখন ডেটা গ্রুপ বা ক্যাটাগরি অনুযায়ী দেখাতে হয়, তখন FlatList যথেষ্ট নয়। এই ক্ষেত্রে আমরা ব্যবহার করি SectionList।

উদাহরণ: ক্লাস অনুযায়ী ছাত্র, ক্যাটাগরি অনুযায়ী প্রোডাক্ট

📌 SectionList Example (TypeScript)

import { SectionList, Text, View } from 'react-native';

type StudentSection = {
  title: string;
  data: string[];
};

const students: StudentSection[] = [
  {
    title: 'Class 10',
    data: ['Rahul', 'Amit'],
  },
  {
    title: 'Class 12',
    data: ['Suman', 'Ravi'],
  },
];

export default function App() {
  return (
    <SectionList
      sections={students}
      keyExtractor={(item, index) => item + index}
      renderItem={({ item }) => (
        <Text style={{ paddingLeft: 20 }}>• {item}</Text>
      )}
      renderSectionHeader={({ section }) => (
        <Text style={{ fontWeight: 'bold', padding: 10 }}>
          {section.title}
        </Text>
      )}
    />
  );
}
  

🔄 FlatList vs SectionList