FlatList हा React Native चा घटक आहे जो डेटाच्या स्क्रोल करण्यायोग्य यादीबद्ध कार्यक्षमतेने दर्शविण्यासाठी वापरला जातो. हा आयटम विलंबने दर्शवतो (फक्त दृश्यमान असलेल्या), ज्यामुळे लांब यादीबद्ध असलेल्यांसाठी कार्यक्षम होतो — ScrollView मध्ये डेटा मॅप करण्यापेक्षा बरेच चांगले.
{ , , } ;
() {
(
);
}
FlatList data अॅरे, renderItem फंक्शन (प्रत्येक आयटम दर्शवणारे), आणि keyExtractor (अद्वितीय की) घेते — आणि आयटम कार्यक्षमतेने दर्शवतो.
❌ 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 मध्ये मानक, कार्यक्षम मार्ग आहे, म्हणून हे अवश्य जाणून घेणे आवश्यक आहे.
जवळजवळ प्रत्येक अँप्लिकेशन यादीबद्ध असलेली दर्शवते (फीड, संदेश, शोध परिणाम), आणि असे कार्यक्षमतेने करणे महत्वाचे आहे.
मुख्य अंतर्दृष्टी असे आहे की FlatList आयटम विलंबने दर्शवतो (फक्त दृश्यमान असलेल्या, वर्च्युअलाइজेशनद्वारे, तुम्ही स्क्रोल करता तेव्हा पुनर्नवीनीकरण) — ज्यामुळे लांब यादीबद्ध असलेल्यांसाठी कार्यक्षम होतो, ScrollView with data.map() वापरण्याच्या सामान्य चुकीच्या विरूद्ध ज्यामुळे सर्व आयटम एकाचवेळी दर्शविले जातात (स्क्रीन बाहेरचेही), ज्यामुळे लांब यादीबद्ध असलेल्यांसाठी मंदता आणि मेमोरी समस्या निर्माण होतात.
कोणत्याही गैर-क्षुल्लक यादीबद्ध असलेल्यांसाठी FlatList वापरण्यास समजून घेणे (आणि ScrollView फक्त लहान, स्थिर सामग्रीसाठी) महत्वाचे व्यावहारिक ज्ञान आहे जे वास्तविक कार्यक्षमता समस्यांपासून बचाव करते.
मूलभूत वापराचे समज घेणे (आयटम दर्शविण्यासाठी data अॅरे, renderItem फंक्शन, आणि अद्वितीय की साठी keyExtractor) आवश्यक आहे.
उपयोगी वैशिष्ट्ये समजून घेणे — onEndReached (अनंत स्क्रोल/पेजिनेशन साठी, अंताच्या जवळ अधिक डेटा लोड करणे — अत्यंत सामान्य आवश्यकता), खेचून ताजे करणे, हेडर/फूटर/विभाजक घटक, ग्रिड आणि क्षैतिज लेआउट, आणि गट केलेल्या यादीबद्ध असलेल्यांसाठी SectionList — अँप्लिकेशनमध्ये असलेल्या सामान्य यादीबद्ध आवश्यकतांचा समावेश करतात.
डेटा यादीबद्ध असलेल्या कार्यक्षमतेने दर्शविणे हे जवळजवळ सार्वभौमिक अँप्लिकेशन आवश्यकता आहे आणि FlatList (त्याच्या विलंब दर्शविणे/वर्च्युअलाइজेशन सह) मानक, कार्यक्षम React Native उपाय आहे — भोळे ScrollView+map दृष्टिकोनापेक्षा बरेच चांगले — FlatList समजून घेणे आवश्यक, वारंवार लागू केले जाणारे React Native ज्ञान आहे — डेटा यादीबद्ध असलेल्या दर्शविण्यासाठी जवळजवळ प्रत्येक अँप्लिकेशनमध्ये वापरल्या जाणार्या मूल घटक, जिथे त्याचे कार्यक्षम विलंब दर्शविणे आणि वैशिष्ट्ये (अनंत स्क्रोल आणि खेचून ताजे करणे यांसारखी) समजून घेणे कार्यक्षम, कार्यात्मक यादीबद्ध असलेल्या तयार करण्यासाठी मूलभूत आहे, React Native विकास साठी मानक कौशल्य आहे.