FlatList React Native को component हो जो डेटाको स्क्रोलयोग्य सूचीहरू कुशलतापूर्वक प्रस्तुत गर्दछ। यसले आइटमहरूलाई आलसीरूपमा (केवल दृश्यमान जे छ) प्रस्तुत गर्दछ, जसले यसलाई लामो सूचीहरूको लागि कार्यकारी बनाउँछ — ScrollView मा डेटा म्यापिङ गर्नुभन्दा धेरै राम्रो।
{ , , } ;
() {
(
);
}
FlatList ले data array, एक renderItem function (प्रत्येक आइटम प्रस्तुत गर्ने), र एक keyExtractor (अद्वितीय keys) लिन्छ — र आइटमहरूलाई कुशलतापूर्वक प्रस्तुत गर्दछ।
❌ ScrollView with data.map(...) → renders ALL items at once (even off-screen) →
slow/memory-heavy for long lists
✅ FlatList → renders only VISIBLE items lazily (virtualization); recycles as you scroll →
performant for long/large lists
→ Use FlatList for any non-trivial list; ScrollView only for small, fixed content.
✓ onEndReached → load more data when scrolling near the end (INFINITE SCROLL / pagination)
✓ refreshing / onRefresh → PULL-TO-REFRESH
✓ ListHeaderComponent / ListFooterComponent / ItemSeparatorComponent
✓ numColumns → grid layout; horizontal → horizontal list
✓ SectionList → for sectioned/grouped lists
FlatList बुझ्न आवश्यक छ किनभने डेटाको सूचीहरू प्रदर्शन गर्न गरिबिन्न आवश्यकता छ अनुप्रयोगहरूमा, र FlatList React Native मा मानक, कार्यकारी तरिका हो, त्यसैले यो अवश्य-ज्ञान हो।
लगभग हरेक अनुप्रयोगले सूचीहरू (feeds, सन्देशहरू, खोज परिणामहरू) देखाउँछ, र यो कुशलतापूर्वक गर्न महत्त्वपूर्ण छ।
मुख्य अन्तर्दृष्टि यो छ कि FlatList ले आइटमहरूलाई आलसीरूपमा प्रस्तुत गर्दछ (केवल दृश्यमान, virtualization को माध्यमबाट, तपाईं स्क्रोल गर्दा पुनः प्रयोग गर्दै) — यसलाई लामो सूचीहरूको लागि कार्यकारी बनाउँछ, ScrollView को साथ data.map() को सामान्य गल्तीको विपरीत जसले सबै आइटमहरू एकै पल मा प्रस्तुत गर्दछ (अफ-स्क्रिन पनि), लामो सूचीहरूको लागि मन्दता र मेमोरी समस्या निम्त्याउँछ।
कुनै पनि गैर-तुच्छ सूचीको लागि FlatList प्रयोग गर्न (र ScrollView केवल साना, निर्धारित सामग्रीको लागि) को बुझ्न महत्त्वपूर्ण व्यावहारिक ज्ञान हो जो वास्तविक कार्यक्षमता समस्याहरू रोक्छ।
मौलिक प्रयोग बुझ्न (data array, renderItem function, र अद्वितीय keys को लागि keyExtractor) सूचीहरू प्रस्तुत गर्न आवश्यक छ।
उपयोगी सुविधाहरू बुझ्न — onEndReached (अनन्त स्क्रोल/pagination को लागि, अन्तको नजीक अधिक डेटा लोड गर्दै — एकदम सामान्य आवश्यकता), pull-to-refresh, header/footer/separator components, grid र horizontal layouts, र grouped सूचीहरूको लागि SectionList — अनुप्रयोगहरूका सामान्य सूची आवश्यकताहरू कभर गर्दछ।
किनभने सूचीहरू कुशलतापूर्वक प्रदर्शन गर्न गरिबिन्न अनुप्रयोग आवश्यकता हो र FlatList (यसको आलसी rendering/virtualization को साथ) मानक, कार्यकारी React Native समाधान हो — भोली ScrollView+map दृष्टिकोणभन्दा धेरै राम्रो — FlatList बुझ्न आवश्यक, बारम्बार-प्रयोग गरिने React Native ज्ञान हो — एक मूल component जो लगभग हरेक अनुप्रयोगमा डेटा सूचीहरू प्रदर्शन गर्न प्रयोग गरिन्छ, जहाँ यसको कुशल आलसी rendering र सुविधाहरू (जस्तो अनन्त स्क्रोल र pull-to-refresh) बुझ्न कार्यकारी, कार्यात्मक सूचीहरू निर्माण गर्न मौलिक छ, React Native विकासको लागि एक मानक कौशल।