Cum redai liste cu FlatList?

Question

Accepted Answer

**FlatList** este componenta React Native pentru redarea eficientă a **listelor derulabile** de date. Randează elementele **cu întârziere** (doar ce este vizibil), ceea ce o face performantă pentru liste lungi — mult mai bine decât maparea peste date într-un ScrollView. ## FlatList — liste eficiente ```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 primește matricea **data**, o funcție **renderItem** (randarea fiecărui element) și un **keyExtractor** (chei unice) — și randează elementele eficient. ## De ce FlatList (nu 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. ``` ## Caracteristici utile ale 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 ``` ## De ce conteaza Înțelegerea FlatList este esențială deoarece **afișarea listelor de date este o nevoie aproape universală** în aplicații, iar FlatList este modul standard și performant de a o face în React Native, deci este cunoaștere esențială. Aproape fiecare aplicație afișează liste (feed-uri, mesaje, rezultate de cautare), și a o face eficient este important. Insightul cheie este că **FlatList randează elementele cu întârziere** (doar ce este vizibil, prin virtualizare, reciclare pe măsură ce derulezi) — ceea ce o face performantă pentru liste lungi, în contrast cu greșeala comună de a folosi **ScrollView cu `data.map()`** care randează toate elementele deodată (chiar și în afara ecranului), cauzând încetinire și probleme de memorie pentru liste lungi. Înțelegerea de a **folosi FlatList pentru orice listă netrivială** (și ScrollView doar pentru conținut mic, fix) este cunoaștere practică importantă care previne probleme reale de performanță. Înțelegerea utilizării de bază (matricea `data`, funcția `renderItem` și `keyExtractor` pentru chei unice) este necesară pentru redarea listelor. Înțelegerea **caracteristicilor utile** — `onEndReached` (pentru scroll infinit/paginare, încărcarea mai multor date spre sfârșitul listei — o nevoie foarte comună), pull-to-refresh, componente de antet/subsol/separator, layout-uri grid și orizontale, și SectionList pentru liste grupate — acoperă cerințele comune pe care le au listele în aplicații. Deoarece afișarea eficientă a listelor este o cerință aproape universală a aplicațiilor și FlatList (cu redarea sa cu întârziere/virtualizare) este soluția standard și performantă React Native — mult mai bună decât abordarea naivă ScrollView+map — înțelegerea FlatList este cunoaștere esențială, frecvent aplicată în React Native — o componentă de bază folosită în aproape fiecare aplicație pentru afișarea listelor de date, unde înțelegerea redării sale eficiente cu întârziere și caracteristicilor (cum ar fi scroll infinit și pull-to-refresh) este fundamentală pentru construirea listelor performante și funcționale, o abilitate standard pentru dezvoltarea React Native.