FlatList: এটি কী, API এবং React Native-এ অপ্টিমাইজেশন

FlatList কী?

FlatList একটি React Native উপাদান যা বড় ডেটা সেটের উচ্চ-কার্যক্ষমতা রেন্ডারিং সহ ভার্চুয়ালাইজড তালিকা বাস্তবায়ন করে। উপাদানটি VirtualizedList-এর উপর নির্মিত এবং যেকোনো জটিলতার সমতল তালিকা তৈরির জন্য ঘোষণামূলক API প্রদান করে।

FlatList React Native 0.43-এ পুরাতন ListView-এর প্রতিস্থাপন হিসাবে প্রবর্তিত হয়েছিল। Meta (2026) অনুসারে, FlatList তালিকা নিয়ে কাজ করা 85% React Native অ্যাপ্লিকেশনে ব্যবহৃত হয়। উপাদানটি সমস্ত সাধারণ পরিস্থিতি সমর্থন করে: পরিচিতি, নিউজ ফিড, পণ্য ক্যাটালগ এবং চ্যাট।

ইতিহাস এবং ইকোসিস্টেমে স্থান

FlatList-এর আগে, ডেভেলপাররা ListView ব্যবহার করত, যার জন্য ম্যানুয়াল সেল পুনঃব্যবহার কনফিগারেশন প্রয়োজন হত। FlatList Android-এ RecyclerView (2014) এবং iOS-এ UICollectionView (2012) অনুরূপ উইন্ডোড রেন্ডারিং প্রয়োগ করে এই প্রক্রিয়াটি স্বয়ংক্রিয় করেছে। আধুনিক প্রকল্পে, FlatList যেকোনো তালিকার জন্য ডি-ফ্যাক্টো স্ট্যান্ডার্ড।

FlatList ভার্চুয়ালাইজেশন কীভাবে কাজ করে

FlatList ভার্চুয়ালাইজেশন একটি প্রক্রিয়া যেখানে উপাদান শুধুমাত্র সেই এলিমেন্টগুলি রেন্ডার করে যা দৃশ্যমান স্ক্রিন এলাকায় পড়ে, প্রতিটি পাশে একটি ছোট বাফার সহ। বাকি এলিমেন্টগুলি DOM-এ তৈরি করা হয় না, মেমোরি সাশ্রয় করে এবং রেন্ডারিং দ্রুত করে।

স্ক্রোল করার সময়, FlatList ইতিমধ্যে তৈরি করা View কোষগুলি পুনরায় ব্যবহার করে, তাদের ডেটা প্রতিস্থাপন করে। এটি 10,000 এলিমেন্টের তালিকার জন্য হাজার হাজার View তৈরি করা প্রতিরোধ করে। ডিফল্ট বাফার আকার দৃশ্যমান এলাকার উপরে এবং নীচে 10 এলিমেন্ট, তবে এটি windowSize-এর মাধ্যমে কনফিগারযোগ্য।

এই প্যারামিটারগুলির সর্বোত্তম কনফিগারেশন স্ক্রোল মসৃণতা এবং মেমোরি খরচের মধ্যে ভারসাম্য বজায় রাখতে দেয়। বড় এলিমেন্টযুক্ত তালিকার জন্য, windowSize 5-7-এ কমানোর সুপারিশ করা হয়।

FlatList API এবং প্রধান প্রপ্স

FlatList API-তে তালিকা প্রদর্শন এবং আচরণ কনফিগার করার জন্য প্রপ্সের একটি সেট অন্তর্ভুক্ত। দুটি বাধ্যতামূলক প্রপ্স হল data (ডেটা অ্যারে) এবং renderItem (এলিমেন্ট রেন্ডারিং ফাংশন)। keyExtractor প্রতিটি এলিমেন্টের জন্য অনন্য কী প্রদান করে কার্যক্ষমতা উন্নত করে।

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

const App = () => {
  const data = Array.from({ length: 100 }, (_, i) => ({
    id: i.toString(),
    title: `Item #${i + 1}`,
  }));

  return (
    <FlatList
      data={data}
      renderItem={({ item }) => (
        <View style={styles.item}>
          <Text>{item.title}</Text>
        </View>
      )}
      keyExtractor={item => item.id}
      ItemSeparatorComponent={() => <View style={styles.separator} />}
    />
  );
};

ItemSeparatorComponent এলিমেন্টগুলির মধ্যে বিভাজক যুক্ত করে, ListHeaderComponent এবং ListFooterComponent তালিকায় হেডার এবং ফুটার যুক্ত করে। এটি অতিরিক্ত র্যাপার ছাড়াই জটিল লেআউট তৈরি করতে দেয়।

const styles = StyleSheet.create({
  item: {
    padding: 16,
    backgroundColor: '#fff',
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0',
  },
  separator: {
    height: 1,
    backgroundColor: '#ccc',
  },
});

FlatList কার্যক্ষমতা অপ্টিমাইজেশন

FlatList অপ্টিমাইজেশন শত শত এবং হাজার হাজার এলিমেন্টযুক্ত অ্যাপ্লিকেশনের জন্য গুরুত্বপূর্ণ। সঠিক কনফিগারেশন ছাড়া, তালিকা স্ক্রোল করার সময় ধীর হতে পারে, অতিরিক্ত মেমোরি খরচ করতে পারে এবং দুর্বল ডিভাইসে ক্র্যাশ ঘটাতে পারে।

প্রথম নিয়ম হল অনন্য এবং স্থিতিশীল সনাক্তকারীর সাথে keyExtractor ব্যবহার করা। সূচককে কী হিসাবে ব্যবহার করলে ভুল সেল পুনঃব্যবহার এবং স্টেট বাগ হয়। দ্বিতীয় নিয়ম হল renderItem-কে useCallback-এ মোড়ানো এবং এলিমেন্ট উপাদানের জন্য React.memo ব্যবহার করা।

নির্দিষ্ট উচ্চতার জন্য getItemLayout

যদি সমস্ত এলিমেন্টের উচ্চতা সমান হয়, তাহলে getItemLayout FlatList-কে উপাদান পরিমাপ না করেই স্ক্রোল অবস্থান গণনা করতে দেয়। এটি বিশেষ করে নির্দিষ্ট সূচকে স্ক্রোল করার সময় উল্লেখযোগ্য কার্যক্ষমতা বৃদ্ধি প্রদান করে।

const ITEM_HEIGHT = 80;

const getItemLayout = (data, index) => ({
  length: ITEM_HEIGHT,
  offset: ITEM_HEIGHT * index,
  index,
});

<FlatList
  data={data}
  getItemLayout={getItemLayout}
  renderItem={renderItem}
/FlatList>

useMemo ডেটার জন্য অপ্রয়োজনীয় পুনরায় রেন্ডারিং প্রতিরোধ করে। যদি ডেটা API থেকে আসে, তবে এটি একবার রূপান্তর করুন এবং ক্যাশ করুন। এলিমেন্ট উপাদানের জন্য React.memo ব্যবহার করুন যাতে অপরিবর্তিত এলিমেন্ট রেন্ডার করা এড়ানো যায়।

অনুভূমিক তালিকা এবং ক্যারোজেল

অনুভূমিক FlatList horizontal={true} প্রপ যোগ করে তৈরি করা হয়। তালিকা স্ক্রোল দিক X অক্ষে পরিবর্তন করে, যা পণ্য ক্যারোজেল, ইমেজ গ্যালারি এবং অনুভূমিক মেনুর জন্য সুবিধাজনক।

অনুভূমিক মোডে, নেটিভ ক্যারোজেলের মতো ধাপে ধাপে স্ক্রোলিংয়ের জন্য snapToInterval এবং snapToAlignment সঠিকভাবে কনফিগার করা গুরুত্বপূর্ণ। উপাদান স্বয়ংক্রিয়ভাবে মোমেন্টাম এবং আঙুল তোলা পরিচালনা করে, নিকটতম এলিমেন্টে থামে।

<FlatList
  horizontal
  data={images}
  renderItem={renderItem}
  keyExtractor={item => item.id}
  showsHorizontalScrollIndicator={false}
  snapToInterval={CARD_WIDTH + GAP}
  snapToAlignment="start"
  decelerationRate="fast"
  pagingEnabled
  onViewableItemsChanged={onViewableItemsChanged}
/>

onViewableItemsChanged একটি কলব্যাক যা দৃশ্যমান এলিমেন্ট পরিবর্তিত হলে ট্রিগার হয়। এটি অ্যানালিটিক্স, লেজি ইমেজ লোডিং এবং শুধুমাত্র দৃশ্যমান কার্ডের জন্য ভিডিও সক্রিয় করতে ব্যবহৃত হয়।

পুল-টু-রিফ্রেশ এবং অসীম স্ক্রোল

পুল-টু-রিফ্রেশ FlatList-এ refreshing এবং onRefresh প্রপ্সের মাধ্যমে বাস্তবায়িত হয়, যা লোডিং অবস্থার সাথে একত্রে কাজ করে। তালিকা নিচে টানলে onRefresh কল হয়, এবং refreshing ফ্ল্যাগ বারবার কল ব্লক করে।

অসীম স্ক্রোল onEndReached-এর মাধ্যমে কনফিগার করা হয় — একটি কলব্যাক যা তালিকার শেষের কাছে পৌঁছালে ট্রিগার হয়। onEndReachedThreshold নির্ধারণ করে শেষের কত এলিমেন্ট আগে ইভেন্ট ফায়ার হয়। সাধারণত কার্সার-ভিত্তিক পেজিনেশন ব্যবহৃত হয়।

const ListWithPagination = () => {
  const [data, setData] = React.useState([]);
  const [page, setPage] = React.useState(1);
  const [refreshing, setRefreshing] = React.useState(false);

  const loadMore = React.useCallback(async () => {
    const newData = await fetchPage(page);
    setData(prev => [...prev, ...newData]);
    setPage(p => p + 1);
  }, [page]);

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={item => item.id}
      refreshing={refreshing}
      onRefresh={loadMore}
      onEndReached={loadMore}
      onEndReachedThreshold={0.5}
    />
  );
};

গুরুত্বপূর্ণ: onEndReached একাধিকবার কল হতে পারে। পূর্ববর্তী অনুরোধ শেষ না হওয়া পর্যন্ত বারবার অনুরোধ ব্লক করতে isLoading ফ্ল্যাগ যোগ করুন। লোডিং নির্দেশ করতে ListFooterComponent-এ ActivityIndicator ব্যবহার করুন।