Hvordan renderer du lister med FlatList?

Question

Accepted Answer

**FlatList** er React Native's komponent til effektiv rendering af **scrollbare lister** med data. Den renderer elementer **dovnt** (kun det der er synligt), hvilket gør den performant for lange lister — langt bedre end at mappe over data i en ScrollView. ## FlatList — effektive lister ```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 tager **data**-arrayet, en **renderItem**-funktion (der renderer hvert element), og en **keyExtractor** (unikke nøgler) — og renderer elementer effektivt. ## Hvorfor FlatList (ikke 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. ``` ## Nyttige FlatList-funktioner ```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 ``` ## Hvorfor det betyder noget At forstå FlatList er essentielt, fordi **visning af datalister er et næsten universelt behov** i apps, og FlatList er standardvejen at gøre det performant på i React Native — det er vigtig viden at kende. Næsten hver app viser lister (feeds, beskeder, søgeresultater), og at gøre det effektivt er vigtig. Hovedpointer er, at **FlatList renderer elementer dovnt** (kun det der er synligt via virtualisering, genbrug mens du scroller) — hvilket gør det performant for lange lister, i modsætning til den almindelige fejl at bruge en **ScrollView med `data.map()`** som renderer alle elementer på en gang (selv dem uden for skærmen), hvilket forårsager langsommelighed og hukommelsesprobleemer for lange lister. At forstå at **bruge FlatList for enhver ikke-triviel liste** (og ScrollView kun for småt, fast indhold) er vigtig praktisk viden, der forhindrer rigtige performanceproblemer. At forstå grundlæggende brug (``data``-arrayet, ``renderItem``-funktionen, og ``keyExtractor`` for unikke nøgler) er nødvendigt for at rendere lister. At forstå **nyttige funktioner** — ``onEndReached`` (til uendelig scroll/paginering, indlæsning af mere data tæt på slutningen — et meget almindeligt behov), pull-to-refresh, header/footer/separator-komponenter, gitter- og horisontale layouts, og SectionList for grupperede lister — dækker de almindelige listekrav apps har. Da effektiv visning af lister er et næsten universelt app-krav, og FlatList (med dens doven rendering/virtualisering) er standardløsningen i React Native, der er meget bedre end den naive ScrollView+map-tilgang — at forstå FlatList er essentiel, hyppigt brugt React Native-viden — en kernkomponent brugt i næsten hver app til visning af datalister, hvor forståelse af dens effektive doven rendering og funktioner (som uendelig scroll og pull-to-refresh) er grundlæggende for opbygning af performante, funktionelle lister — en standardfærdighed for React Native-udvikling.