आप FlatList के साथ lists कैसे render करते हैं?

Question

Accepted Answer

**FlatList** data की **scrollable lists** को कुशलता से render करने के लिए React Native का component है। यह items को **आलस्य से** (केवल जो दिखाई दे रहा है) render करता है, जिससे यह लंबी lists के लिए performant बनता है — ScrollView में data पर mapping करने की तुलना में कहीं बेहतर। ## FlatList — कुशल lists ```jsx import { FlatList, Text, View } from 'react-native'; function UserList({ users }) { return ( item.id} // unique key per item (important!) renderItem={({ item }) => ( // how to render each item {item.name} )} /> ); } ``` FlatList **data** array, एक **renderItem** function (प्रत्येक item को render करना), और एक **keyExtractor** (unique keys) लेता है — और items को कुशलता से render करता है। ## FlatList क्यों (ScrollView + map नहीं) ```text ❌ 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. ``` ## उपयोगी FlatList सुविधाएँ ```text ✓ 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 समझना आवश्यक है क्योंकि apps में **data की lists प्रदर्शित करना लगभग सार्वभौमिक आवश्यकता है**, और FlatList React Native में इसे करने का मानक, performant तरीका है, इसलिए यह अवश्य-जानने योग्य ज्ञान है। लगभग हर app lists दिखाता है (feeds, messages, search results), और इसे कुशलता से करना महत्वपूर्ण है। मुख्य अंतर्दृष्टि यह है कि **FlatList items को आलस्य से render करता है** (केवल जो दिखाई दे रहा है, virtualization के माध्यम से, scroll करते समय recycling) — जो इसे लंबी lists के लिए performant बनाता है, **ScrollView के साथ `data.map()`** का उपयोग करने की आम गलती के विपरीत जो सभी items को एक साथ render करता है (off-screen भी), जिससे लंबी lists के लिए धीमापन और memory समस्याएँ होती हैं। **किसी भी non-trivial list के लिए FlatList का उपयोग करना** (और छोटी, निश्चित content के लिए केवल ScrollView) समझना महत्वपूर्ण व्यावहारिक ज्ञान है जो वास्तविक performance समस्याओं को रोकता है। बुनियादी उपयोग समझना (`data` array, `renderItem` function, और unique keys के लिए `keyExtractor`) lists को render करने के लिए आवश्यक है। **उपयोगी सुविधाएँ** समझना — `onEndReached` (infinite scroll/pagination के लिए, अंत के पास अधिक data load करना — एक बहुत आम आवश्यकता), pull-to-refresh, header/footer/separator components, grid और horizontal layouts, और grouped lists के लिए SectionList — apps की आम list आवश्यकताओं को कवर करता है। चूँकि lists को कुशलता से प्रदर्शित करना लगभग सार्वभौमिक app आवश्यकता है और FlatList (इसकी आलसी rendering/virtualization के साथ) मानक, performant React Native समाधान है — naive ScrollView+map दृष्टिकोण से कहीं बेहतर — FlatList समझना आवश्यक, बार-बार-लागू किया जाने वाला React Native ज्ञान है — data lists प्रदर्शित करने के लिए लगभग हर app में उपयोग किया जाने वाला एक मुख्य component, जहाँ इसकी कुशल आलसी rendering और सुविधाओं (जैसे infinite scroll और pull-to-refresh) को समझना performant, कार्यात्मक lists बनाने के लिए मूलभूत है, React Native development के लिए एक मानक skill।