Hoe render je lijsten met FlatList?

Question

Accepted Answer

**FlatList** is React Native's component voor het efficiënt renderen van **scrollbare lijsten** met gegevens. Het rendert items **lui** (alleen wat zichtbaar is), wat het performant maakt voor lange lijsten — veel beter dan data mappen in een ScrollView. ## FlatList — efficiënte lijsten ```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 neemt de **data** array, een **renderItem** functie (rendert elk item), en een **keyExtractor** (unieke sleutels) — en rendert items efficiënt. ## Waarom FlatList (niet 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. ``` ## Nuttige FlatList-functies ```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 ``` ## Waarom het belangrijk is Begrip van FlatList is essentieel omdat **het weergeven van datarijen een bijna universele behoefte** in apps is, en FlatList is de standaard, performante manier om dit in React Native te doen, dus het is essentiële kennis. Bijna elke app toont lijsten (feeds, berichten, zoekresultaten), en dit efficiënt doen is belangrijk. Het belangrijkste inzicht is dat **FlatList items lui rendert** (alleen wat zichtbaar is, via virtualisering, recycling terwijl je scrollt) — waardoor het performant is voor lange lijsten, in tegenstelling tot de veel gemaakte fout van het gebruik van een **ScrollView met `data.map()`** die alle items tegelijk rendert (zelfs buiten scherm), wat traagheid en geheugenproblemen veroorzaakt voor lange lijsten. Begrijpen dat je **FlatList moet gebruiken voor elke niet-triviale lijst** (en ScrollView alleen voor kleine, vaste inhoud) is belangrijke praktische kennis die echte prestatieproblemen voorkómt. Begrijpen van het basisgebruik (de `data` array, `renderItem` functie, en `keyExtractor` voor unieke sleutels) is nodig voor het renderen van lijsten. Begrip van **nuttige functies** — `onEndReached` (voor oneindige scroll/paginering, meer gegevens laden aan het einde — een veel voorkomende behoefte), pull-to-refresh, header/footer/separator componenten, raster- en horizontale lay-outs, en SectionList voor gegroepeerde lijsten — dekt de algemene lijstvereisten die apps hebben. Omdat het efficiënt weergeven van lijsten een bijna universele app-vereiste is en FlatList (met zijn lui renderen/virtualisering) de standaard, performante React Native-oplossing is — veel beter dan de naïeve ScrollView+map benadering — is het begrijpen van FlatList essentieel, veelgebruikt React Native-kennis — een kerncomponent die in bijna elke app wordt gebruikt om datarijen weer te geven, waarbij het begrijpen van het efficiënte lui renderen en functies (zoals oneindige scroll en pull-to-refresh) fundamenteel is voor het bouwen van performante, functionele lijsten, een standaardvaardigheid voor React Native-ontwikkeling.