useEffect-basis: dependencies en cleanup
Voer side effects uit na het renderen, bepaal met de dependency array wanneer ze opnieuw worden uitgevoerd en retourneer een cleanup-functie om memory leaks te voorkomen.
useEffect-basis: dependencies en cleanup is een gratis Frontend Academy-les op CoddyKit. Dit is les 1 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Frontend Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Frontend Academy bevat in totaal 4 lessen.
Wat is useEffect?
useEffect voert een neveneffect uit nadat React heeft gerenderd. Neveneffecten zijn onder andere gegevens ophalen, luisteren naar gebeurtenissen, timers instellen en communiceren met externe API's. Effecten worden uitgevoerd nadat de browser heeft getekend, niet tijdens het renderen.
Basissyntaxis
useEffect(effect, deps?). De effectfunctie wordt standaard na elke render uitgevoerd. Geef een afhankelijkheidsarray op om te bepalen wanneer de functie wordt uitgevoerd.
import { useEffect } from 'react';
function Component() {
useEffect(() => {
console.log('Ran after every render');
});
}De afhankelijkheidsarray bepaalt wanneer het effect wordt uitgevoerd
Lege array []: één keer uitvoeren na het koppelen. Niet-lege array [a, b]: uitvoeren wanneer a of b verandert. Geen array: uitvoeren na elke render (zelden wat je wilt).
// Run once on mount:
useEffect(() => {
fetchInitialData();
}, []);
// Run when userId changes:
useEffect(() => {
fetchUser(userId);
}, [userId]);
// Run after every render (usually a bug):
useEffect(() => {
trackPageView();
});De opruimfunctie
Geef vanuit useEffect een functie terug om op te ruimen: verwijder gebeurtenislisteners, annuleer abonnementen en wis timers. De opruimfunctie wordt uitgevoerd vóór het volgende effect en bij het ontkoppelen.
useEffect(() => {
const handleResize = () => setWidth(window.innerWidth);
window.addEventListener('resize', handleResize);
// Cleanup: remove listener when effect re-runs or component unmounts
return () => {
window.removeEventListener('resize', handleResize);
};
}, []);Verouderde closures in afhankelijkheden
Effecten sluiten de waarden waarnaar ze verwijzen in op het moment waarop ze worden aangemaakt. Als je in een effect een status- of propwaarde leest zonder die in de afhankelijkheden op te nemen, zie je een verouderde waarde. De regel exhaustive-deps van ESLint detecteert dit.
De regel exhaustive-deps van ESLint
De ESLint-regel react-hooks/exhaustive-deps waarschuwt wanneer je afhankelijkheden van een effect mist. Het is vrijwel altijd juist om de suggesties te volgen — verouderde afhankelijkheden veroorzaken fouten.
useEffect tegenover useLayoutEffect
useEffect wordt uitgevoerd nadat de browser heeft getekend. useLayoutEffect wordt synchroon na DOM-mutaties uitgevoerd, vóór het tekenen. Gebruik useLayoutEffect om DOM-metingen te lezen en visueel flikkeren te voorkomen.
Meerdere effecten
Gebruik meerdere aanroepen van useEffect om niet-gerelateerde verantwoordelijkheden te scheiden. Elk effect kan een eigen afhankelijkheidsarray en opruimlogica hebben.
// Separate effects for separate concerns:
useEffect(() => { document.title = `${count} items`; }, [count]);
useEffect(() => {
const sub = wsClient.subscribe(onMessage);
return () => sub.unsubscribe();
}, []);Racecondities — de negeervlag
Wanneer een effect gegevens ophaalt op basis van eigenschappen, kunnen eerdere verzoeken later worden voltooid dan latere verzoeken. Gebruik een opruimvlag om verouderde antwoorden te negeren.
useEffect(() => {
let ignore = false;
async function load() {
const data = await fetchUser(userId);
if (!ignore) setUser(data); // only update if not cleaned up
}
load();
return () => { ignore = true; };
}, [userId]);Dubbel effect in Strict Mode
React 18 Strict Mode koppelt componenten in ontwikkeling, ontkoppelt ze en koppelt ze opnieuw om fouten in het opruimen zichtbaar te maken. Je effecten worden twee keer uitgevoerd — dit is opzettelijk en helpt ontbrekende opruiming te detecteren.
Wanneer je useEffect niet gebruikt
Gebruik useEffect niet om: 1) status uit eigenschappen af te leiden (bereken die tijdens het renderen), 2) status opnieuw in te stellen wanneer eigenschappen veranderen (gebruik de key-prop), 3) status onvoorwaardelijk bij te werken (dit veroorzaakt lussen). Vraag je bij twijfel af: reageert deze code op een gebruikersgebeurtenis of op een extern systeem?
Korte controle
Wanneer wordt de opruimfunctie van useEffect uitgevoerd?
Samenvatting: useEffect
Neveneffecten worden na het renderen uitgevoerd. Lege afhankelijkheidsarray = één keer bij het koppelen. Afhankelijkheidsarray = bij specifieke wijzigingen. Geef een opruimfunctie terug om lekken te voorkomen. Gebruik meerdere effecten voor afzonderlijke verantwoordelijkheden. De negeervlag voorkomt verouderde antwoorden van gegevensverzoeken. Strict Mode voert effecten twee keer uit om de opruiming te testen. Gebruik useEffect niet voor afgeleide waarden of status die je tijdens het renderen kunt berekenen.
Leer HTML 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
- 41
- Lessen
- 163
Veelgestelde vragen
Is de les “useEffect-basis: dependencies en cleanup” gratis?
Ja — de volledige tekst van “useEffect-basis: dependencies en cleanup” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Frontend Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Frontend Academy bevat in totaal 4 lessen.
Wat leer ik in “useEffect-basis: dependencies en cleanup”?
Voer side effects uit na het renderen, bepaal met de dependency array wanneer ze opnieuw worden uitgevoerd en retourneer een cleanup-functie om memory leaks te voorkomen. Je oefent met Frontend 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 Frontend Academy te beginnen?
Ervaring vooraf is niet nodig. Frontend 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 “useEffect-basis: dependencies en cleanup”?
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 Frontend Academy?
Ja. Elke les over Frontend 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
- useEffect-basis: dependencies en cleanup
- Data ophalen bij mounten
- Omgaan met laad- en foutstatussen
- AbortController voor cleanup