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 तत्वों की सूची के लिए हजारों Views बनाने से रोकता है। डिफ़ॉल्ट बफर आकार दृश्यमान क्षेत्र के ऊपर और नीचे 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 का उपयोग करें।