FlatList-data, renderItem en keyExtractor
Geef een array door aan de data-prop van FlatList, implementeer renderItem om een gestileerde rijcomponent terug te geven en lever een keyExtractor voor een stabiele identiteit van de lijstitems.
FlatList-data, renderItem en keyExtractor is een gratis React Native Academy-les op CoddyKit. Dit is les 1 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject React Native Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus React Native Academy bevat in totaal 4 lessen.
Waarom FlatList in plaats van ScrollView?
ScrollView geeft al zijn onderliggende elementen tegelijk weer, wat traag wordt bij honderden items. FlatList virtualiseert de lijst: alleen de items die momenteel op het scherm zichtbaar zijn plus een kleine buffer worden weergegeven. Dit vermindert het geheugengebruik sterk en verbetert de scrollprestaties bij grote gegevensverzamelingen.
De prop data
Geef je array met items door aan de prop data. FlatList doorloopt deze array en roept voor elk element renderItem aan. De array kan allerlei JavaScript-objecten bevatten. Wijzigingen in de array data zorgen ervoor dat de betreffende lijstitems opnieuw worden weergegeven.
const DATA = [
{ id: '1', name: 'Alice' },
{ id: '2', name: 'Bob' },
{ id: '3', name: 'Carol' },
];
<FlatList data={DATA} ... />De prop renderItem
De prop renderItem is een functie die een object ontvangt met een eigenschap item (het huidige element van de array) en een React-element moet retourneren. Hier bepaal je hoe elke rij eruitziet. Houd de verwijzing stabiel met useCallback om onnodige nieuwe weergaven te voorkomen.
const renderItem = ({ item }) => (
<View style={styles.row}>
<Text>{item.name}</Text>
</View>
);
<FlatList
data={DATA}
renderItem={renderItem}
/>De prop keyExtractor
keyExtractor vertelt FlatList hoe een unieke tekenreeks als sleutel uit elk item moet worden gehaald. React gebruikt deze sleutels om bij nieuwe weergaven bij te houden welke items zijn gewijzigd. Zonder een geschikte sleutelgenerator valt FlatList terug op de array-index, wat subtiele fouten kan veroorzaken wanneer gegevens worden gewijzigd.
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={(item) => item.id}
/>Een compleet FlatList-voorbeeld
Door data, renderItem en keyExtractor te combineren, krijg je een volledig functionele, scrollbare en gevirtualiseerde lijst. Je kunt de rijen binnen renderItem op dezelfde manier opmaken als elke andere component. FlatList handelt scroll- en tikgebeurtenissen automatisch af.
import { FlatList, View, Text, StyleSheet } from 'react-native';
const DATA = [
{ id: '1', title: 'First Item' },
{ id: '2', title: 'Second Item' },
{ id: '3', title: 'Third Item' },
];
export default function App() {
return (
<FlatList
data={DATA}
keyExtractor={(item) => item.id}
renderItem={({ item }) => (
<View style={styles.item}>
<Text>{item.title}</Text>
</View>
)}
/>
);
}
const styles = StyleSheet.create({
item: { padding: 16, borderBottomWidth: 1, borderColor: '#eee' },
});Een koptekst en voettekst aan een lijst toevoegen
Gebruik ListHeaderComponent om inhoud boven de lijst weer te geven, zoals een zoekbalk of paginatitel, en ListFooterComponent voor inhoud eronder, zoals een laadindicator bij het ophalen van meer gegevens. Deze componenten scrollen mee met de lijst, in tegenstelling tot een view die buiten FlatList staat.
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={(item) => item.id}
ListHeaderComponent={() => <Text style={styles.header}>Users</Text>}
ListFooterComponent={() => <ActivityIndicator />}
/>Een lege lijst met ListEmptyComponent
Wanneer de data-array leeg is, geeft FlatList standaard niets weer. Geef een ListEmptyComponent op om een tijdelijke melding of illustratie weer te geven wanneer er geen items zijn. Dit is veel overzichtelijker dan FlatList in een voorwaarde te plaatsen.
<FlatList
data={filteredData}
renderItem={renderItem}
keyExtractor={(item) => item.id}
ListEmptyComponent={() => (
<Text style={styles.empty}>No results found</Text>
)}
/>Itemscheidingstekens met ItemSeparatorComponent
Gebruik in plaats van randstijlen rechtstreeks aan rijen toe te voegen ItemSeparatorComponent om een scheidingsteken tussen items weer te geven. React Native geeft het scheidingsteken alleen tussen items weer, niet vóór het eerste of na het laatste item. Zo voorkom je dubbele randen aan de uiteinden.
const Separator = () => (
<View style={{ height: 1, backgroundColor: '#eee' }} />
);
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={(item) => item.id}
ItemSeparatorComponent={Separator}
/>Horizontale FlatList
Stel de prop horizontal in op true om een horizontaal scrollende lijst weer te geven. Dit is handig voor carrousels, categorielabels of rijen met verhalen. Met de prop showsHorizontalScrollIndicator kun je de schuifbalk verbergen voor een rustigere weergave.
<FlatList
horizontal
showsHorizontalScrollIndicator={false}
data={categories}
renderItem={({ item }) => (
<View style={styles.chip}>
<Text>{item.label}</Text>
</View>
)}
keyExtractor={(item) => item.id}
/>Programmatisch naar een index scrollen
Gebruik de ref op FlatList en roep flatListRef.current.scrollToIndex({ index, animated: true }) aan om naar een specifiek item te springen. Je kunt ook scrollToOffset gebruiken voor controle tot op pixelniveau of scrollToEnd om naar het einde van de lijst te scrollen.
const flatListRef = useRef(null);
const scrollToTop = () => {
flatListRef.current.scrollToIndex({ index: 0, animated: true });
};
<FlatList ref={flatListRef} data={DATA} renderItem={renderItem} />Veelgemaakte FlatList-fouten voorkomen
Definieer renderItem niet als een anonieme pijlfunctie rechtstreeks in JSX (renderItem={() => ...}). Hierdoor ontstaat bij elke nieuwe weergave een nieuwe functieverwijzing, waardoor elke rij onnodig opnieuw wordt weergegeven. Definieer de functie buiten de JSX of gebruik useCallback om haar te onthouden. Gebruik ook nooit een array-index als sleutel: gebruik altijd een stabiele, unieke ID.
// Bad: anonymous function in JSX
<FlatList renderItem={({ item }) => <Row item={item} />} />
// Good: stable reference
const renderItem = useCallback(({ item }) => <Row item={item} />, []);
<FlatList renderItem={renderItem} />Korte controle
Test je kennis van data, renderItem en keyExtractor van FlatList uit deze les.
Samenvatting van de les
In deze les heb je geleerd hoe: FlatList grote lijsten virtualiseert door alleen zichtbare items weer te geven, renderItem het uiterlijk van elke rij bepaalt en keyExtractor stabiele, unieke sleutels levert voor efficiënte afstemming door React. Hierna bekijken we pull-to-refresh en oneindig scrollen met meer gegevens laden.
Leer JavaScript met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 30
- Lessen
- 120
Veelgestelde vragen
Is de les “FlatList-data, renderItem en keyExtractor” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad React Native Academy, waaronder “FlatList-data, renderItem en keyExtractor”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus React Native Academy bevat in totaal 4 lessen.
Wat leer ik in “FlatList-data, renderItem en keyExtractor”?
Geef een array door aan de data-prop van FlatList, implementeer renderItem om een gestileerde rijcomponent terug te geven en lever een keyExtractor voor een stabiele identiteit van de lijstitems. Je oefent met React Native Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met React Native Academy te beginnen?
Ervaring vooraf is niet nodig. React Native Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.
Hoe lang duurt de les “FlatList-data, renderItem en keyExtractor”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over React Native Academy?
Ja. Elke les over React Native Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- FlatList-data, renderItem en keyExtractor
- Pull-to-refresh en meer laden
- SectionList met headers
- Een contactenlijstapp bouwen