Kako prikazati liste s FlatList komponentom?

Question

Accepted Answer

**FlatList** je React Native komponenta za efikasno renderiranje **scrollabilnih listi** podataka. Rendira stavke **lazily** (samo vidljive), što je performantno za duge liste — daleko bolje nego mapiranje podataka u ScrollView komponentu. ## FlatList — efikasne liste ```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 prima **data** niz, **renderItem** funkciju (renderira svaku stavku) i **keyExtractor** (jedinstveni ključevi) — i rendira stavke efikasno. ## Zašto FlatList (ne 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. ``` ## Korisne FlatList mogućnosti ```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 ``` ## Zašto je to važno Razumijevanje FlatList komponente je bitno jer je **prikazivanje listi podataka gotovo univerzalna potreba** u aplikacijama, a FlatList je standardni, performantan način za to u React Native-u, što ga čini neophodnim znanjem. Skoro svaka aplikacija prikazuje liste (feedovi, poruke, rezultati pretrage), a efikasno njihovo prikazivanje je važno. Ključi uvid je da **FlatList rendira stavke lazily** (samo vidljive, putem virtualizacije, recikliranja dok vrtite) — što je performantno za duge liste, za razliku od česte greške korištenja **ScrollView s `data.map()`** koji rendira sve stavke odjednom (čak i off-screen), što uzrokuje spornost i probleme s memorijom za duge liste. Razumijevanje da **trebate koristiti FlatList za bilo koju netrivijalnu listu** (i ScrollView samo za mali, fiksni sadržaj) je važno praktično znanje koje sprječava prave probleme s performansama. Razumijevanje osnovne upotrebe (`data` niz, `renderItem` funkcija i `keyExtractor` za jedinstvene ključeve) je neophodno za renderiranje listi. Razumijevanje **korisnih mogućnosti** — `onEndReached` (za beskonačni scroll/paginaciju, učitavanje više podataka blizu kraja — vrlo česta potreba), pull-to-refresh, header/footer/separator komponente, grid i horizontalni raspored, te SectionList za grupirane liste — pokriva uobičajene zahtjeve listi koje aplikacije imaju. Budući da je efikasno prikazivanje listi gotovo univerzalna potreba aplikacije i FlatList (s jeho lazy renderiranjem/virtualizacijom) je standardno, performantno React Native rješenje — daleko bolje od naivnog ScrollView+map pristupa — razumijevanje FlatList komponente je bitno, često primijenjeno React Native znanje — osnovnu komponentu korištenu u gotovo svakoj aplikaciji za prikaz listi podataka, gdje je razumijevanje njezina efikasnog lazy renderiranja i mogućnosti (kao što su beskonačni scroll i pull-to-refresh) temeljno za izgradnju performantnih, funkcionalnih listi, standardna vještina za React Native razvoj.