React Native-এ VirtualizedList কম্পোনেন্ট ব্যবহার করা

VirtualizedList হলো React Native-র লো-লেভেল ভার্চুয়ালাইজড লিস্ট কম্পোনেন্ট। এটি বড় ডেটাসেটের জন্য মেমরি এবং পারফরম্যান্স অপ্টিমাইজ করে। FlatList এবং SectionList এর ভেতরে এটি ব্যবহার হয়। সরাসরি ব্যবহার করলে আরও কন্ট্রোল মেলে।

বেসিক সিনট্যাক্স

<VirtualizedList
  data={DATA}
  initialNumToRender={4}
  renderItem={renderItem}
  keyExtractor={keyExtractor}
  getItemCount={getItemCount}
  getItem={getItem}
/>

ইম্পোর্ট

import { VirtualizedList } from 'react-native';

মূল প্রপস

উদাহরণ: ১০০ আইটেম ভার্চুয়ালাইজড লিস্ট

import React from 'react';
import { SafeAreaView, View, VirtualizedList, StyleSheet, Text } from 'react-native';

const DATA = []; // খালি অ্যারে, getItem থেকে ডেটা আসবে

const getItem = (data, index) => ({
  id: index,
  title: `Item ${index + 1}`
});

const getItemCount = (data) => 100; // টোটাল ১০০ আইটেম

const Item = ({ title }) => (
  
    {title}
  
);

const VirtualizedListExample = () => (
  
     }
      keyExtractor={item => item.id.toString()}
      getItemCount={getItemCount}
      getItem={getItem}
    />
  
);

const styles = StyleSheet.create({
  item: {
    backgroundColor: '#ccc',
    height: 100,
    justifyContent: 'center',
    marginVertical: 8,
    marginHorizontal: 16,
    padding: 20
  },
  title: { fontSize: 22 }
});

export default VirtualizedListExample;

কেন VirtualizedList?

• FlatList/SectionList আপনার কেসে ফিট না হলে (কাস্টম ডেটা স্ট্রাকচার, ইনফিনিট লোডিং, কাস্টম উইন্ডোइং)।
• অসীম বা খুব বড় লিস্ট (১০০০০+ আইটেম) gdzie মেমরি ফুটপ্রিন্ট ছোট রাখতে হয়।
• শুধু ভিজিবল আইটেম রেন্ডার হয়, বাকি ডোমেইন থাকে না।