useCallback en useMemo voor betere prestaties
Memoize callbackfuncties met useCallback om onnodige re-renders van childcomponenten te voorkomen en cache dure berekende waarden met useMemo.
useCallback en useMemo voor betere prestaties is een gratis React Native Academy-les op CoddyKit. Dit is les 3 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.
Het probleem van opnieuw renderen
Telkens wanneer een component in React opnieuw wordt gerenderd, worden alle waarden die in de functietekst zijn gemaakt opnieuw aangemaakt. Dit omvat objecten, arrays en vooral — functies. Als een opnieuw aangemaakte functie of waarde als prop aan een onderliggende component wordt doorgegeven, ziet de onderliggende component een nieuwe referentie en wordt deze opnieuw gerenderd, ook wanneer de logische waarde niet is veranderd.
Wat is useCallback?
useCallback(fn, deps) retourneert een gememoïseerde versie van de callbackfunctie die alleen verandert als een van de afhankelijkheden is veranderd. Door een callback in useCallback te wikkelen, behoud je dezelfde functiereferentie tussen renders. Zo voorkom je onnodige nieuwe renders van onderliggende componenten die de callback als prop ontvangen.
import { useCallback } from 'react';
function Parent() {
const [count, setCount] = useState(0);
// handlePress is the SAME function reference between renders
// as long as count does not change
const handlePress = useCallback(() => {
console.log('Pressed, count is:', count);
}, [count]);
return <Child onPress={handlePress} />;
}useCallback met React.memo
useCallback werkt het best in combinatie met React.memo op de onderliggende component. Zonder React.memo wordt de onderliggende component toch opnieuw gerenderd, ongeacht of de prop-referenties gelijk zijn. De combinatie van React.memo op de onderliggende component en useCallback op de callback van de bovenliggende component voorkomt nieuwe renders wanneer noch het gedrag noch de gegevens zijn veranderd.
const ChildButton = React.memo(({ onPress, label }) => (
<Button title={label} onPress={onPress} />
));
function Parent() {
const [count, setCount] = useState(0);
const [text, setText] = useState('');
// ChildButton will NOT re-render when text changes
const handleCount = useCallback(() => setCount(c => c + 1), []);
return (
<>
<TextInput value={text} onChangeText={setText} />
<ChildButton label='Count' onPress={handleCount} />
</>
);
}Wat is useMemo?
useMemo(computeFn, deps) memoiseert het resultaat van een dure berekening. React roept computeFn aan tijdens de eerste render en slaat de geretourneerde waarde in de cache op. Tijdens volgende renders retourneert React de waarde uit de cache, tenzij een afhankelijkheid is veranderd. Zo voorkom je dat zware berekeningen bij elke render opnieuw worden uitgevoerd.
import { useMemo } from 'react';
function ProductList({ products, category }) {
// Only recomputes when products or category changes
const filtered = useMemo(
() => products.filter((p) => p.category === category),
[products, category]
);
return <FlatList data={filtered} renderItem={renderItem} />;
}useMemo voor stabiele objectreferenties
Objecten en arrays die rechtstreeks in JSX worden aangemaakt, hebben bij elke render nieuwe referenties. Als je ze aan een gememoïseerde onderliggende component doorgeeft, maken ze memoïsering ongedaan. Wikkel ze in useMemo om een stabiele referentie te maken die alleen verandert wanneer de onderliggende gegevens veranderen. Dit is vooral belangrijk voor stijlenarrays en configuratieobjecten.
function Chart({ data, color }) {
// New object on every render without useMemo
const chartConfig = useMemo(() => ({
backgroundColor: color,
dataPoints: data.map((d) => d.value),
}), [data, color]);
return <ChartComponent config={chartConfig} />;
}Afhankelijkheidsarrays correct instellen
Zowel useCallback als useMemo vereisen nauwkeurige afhankelijkheidsarrays. Voeg elke waarde uit de scope van de component toe die binnen de gememoïseerde functie of berekening wordt gebruikt. Als je een afhankelijkheid weglaat, gebruikt de gememoïseerde waarde een verouderde closure; als je er te veel opgeeft, wordt de berekening onnodig opnieuw uitgevoerd. De regel exhaustive-deps van ESLint helpt de juistheid af te dwingen.
// Wrong: missing userId dependency — stale closure bug
const fetchUser = useCallback(() => fetch('/user/' + userId), []);
// Correct: userId is listed
const fetchUser = useCallback(() => fetch('/user/' + userId), [userId]);Wanneer je useCallback NIET gebruikt
useCallback heeft kosten: React bewaart de functie in het geheugen en controleert de afhankelijkheidsarray bij elke render. Voor eenvoudige handlers die niet aan gememoïseerde onderliggende componenten worden doorgegeven, zijn de kosten van useCallback groter dan het voordeel. Gebruik het selectief — alleen wanneer de onderliggende component met React.memo is omwikkeld en gelijkheid van props belangrijk is voor de prestaties.
// Unnecessary: Button re-renders anyway; no child is memoized
const handlePress = useCallback(() => setVisible(true), []);
// Fine without useCallback in this case
const handlePress = () => setVisible(true);useMemo voor dure transformaties
Gebruik useMemo wanneer een berekening merkbaar veel tijd kost — bijvoorbeeld bij het sorteren van grote arrays, het parseren van complexe gegevens of het uitvoeren van statistische berekeningen. Als vuistregel geldt: als de berekening meer dan een milliseconde kost en bij elke render wordt uitgevoerd, kun je overwegen deze te memoïseren. Voor eenvoudige bewerkingen, zoals twee getallen optellen, zijn de kosten van memoïsering groter dan die van de berekening zelf.
const sortedAndFiltered = useMemo(() => {
return items
.filter((item) => item.status === selectedStatus)
.sort((a, b) => b.createdAt - a.createdAt)
.slice(0, 100);
}, [items, selectedStatus]);useCallback voor renderItem in FlatList
Door de functie renderItem van een FlatList in useCallback te wikkelen, voorkom je dat bij elke render van de bovenliggende component een nieuwe functiereferentie wordt aangemaakt. Anders zou elke zichtbare rij van de FlatList opnieuw worden gerenderd. Dit is een van de meest merkbare prestatieverbeteringen in React Native-apps met veel lijsten.
const renderItem = useCallback(({ item }) => (
<ProductCard
product={item}
onPress={handleSelectProduct}
/>
), [handleSelectProduct]); // handleSelectProduct also memoized
<FlatList
data={products}
renderItem={renderItem}
keyExtractor={(item) => item.id}
/>De impact meten
Voordat je overal memoïsering toevoegt, meet je de daadwerkelijke impact met de Profiler van React DevTools. Neem een interactie op, bekijk de vlamgrafiek om componenten te vinden die onnodig opnieuw worden gerenderd en voeg alleen useCallback of useMemo toe waar de profiler een echte flessenhals laat zien. Voortijdige optimalisatie maakt de code complexer zonder meetbaar voordeel.
Vergelijkende samenvatting
Onthoud het belangrijkste verschil: useCallback memoiseert een functie (voorkomt dat de functiereferentie opnieuw wordt aangemaakt), terwijl useMemo een berekende waarde memoiseert (voorkomt dat een dure berekening opnieuw wordt uitgevoerd). Beide accepteren een afhankelijkheidsarray en berekenen alleen opnieuw wanneer de vermelde afhankelijkheden veranderen.
// useCallback — memoize a function
const fn = useCallback(() => doSomething(a, b), [a, b]);
// useMemo — memoize a computed value
const val = useMemo(() => computeExpensive(a, b), [a, b]);
// Relationship: useCallback(fn, deps) === useMemo(() => fn, deps)Korte controle
Test je begrip van useCallback en useMemo voor prestaties uit deze les.
Samenvatting van de les
In deze les heb je geleerd dat useCallback een functiereferentie memoiseert om onnodige nieuwe renders van onderliggende componenten te voorkomen, dat useMemo een dure berekende waarde memoiseert om herberekening bij elke render over te slaan en dat beide het best werken in combinatie met React.memo en nauwkeurige afhankelijkheidsarrays. Hierna bekijken we hoe je aangepaste hooks schrijft om stateful logica tussen componenten te delen.
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 “useCallback en useMemo voor betere prestaties” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad React Native Academy, waaronder “useCallback en useMemo voor betere prestaties”, 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 “useCallback en useMemo voor betere prestaties”?
Memoize callbackfuncties met useCallback om onnodige re-renders van childcomponenten te voorkomen en cache dure berekende waarden met useMemo. 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 3 van 4.
Hoe lang duurt de les “useCallback en useMemo voor betere prestaties”?
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
- useRef voor DOM-nodes en veranderlijke waarden
- useReducer voor complexe statuslogica
- useCallback en useMemo voor betere prestaties
- Aangepaste hooks schrijven