useEffect-grundlag: afhængigheder og oprydning
Kør sideeffekter efter rendering, styr hvornår de køres igen med dependency-arrayet, og returnér en cleanup-funktion for at undgå memory leaks.
useEffect-grundlag: afhængigheder og oprydning er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.
Hvad er useEffect?
useEffect kører en sideeffekt, efter React har gengivet. Sideeffekter omfatter datahentning, abonnementer på hændelser, opsætning af timere og interaktion med eksterne API'er. Effekter kører efter tegningen, ikke under gengivelsen.
Grundlæggende syntaks
useEffect(effect, deps?). Effektfunktionen kører efter hver gengivelse som standard. Angiv et afhængighedsarray for at styre, hvornår den kører.
import { useEffect } from 'react';
function Component() {
useEffect(() => {
console.log('Ran after every render');
});
}Afhængighedsarrayet styrer, hvornår effekten kører
Tomt array []: kør én gang efter montering. Array med indhold [a, b]: kør, når a eller b ændres. Intet array: kør efter hver gengivelse (det er sjældent det, du ønsker).
// Run once on mount:
useEffect(() => {
fetchInitialData();
}, []);
// Run when userId changes:
useEffect(() => {
fetchUser(userId);
}, [userId]);
// Run after every render (usually a bug):
useEffect(() => {
trackPageView();
});Oprydningsfunktionen
Returnér en funktion fra useEffect for at udføre oprydning: fjern hændelseslyttere, annullér abonnementer, og ryd timere. Oprydningen kører før den næste effekt og ved afmontering.
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);
};
}, []);Forældede closures i afhængigheder
Effekter indkapsler de værdier, de refererer til, på det tidspunkt hvor de oprettes. Hvis du læser en tilstands- eller propværdi i en effekt uden at angive den som afhængighed, får du vist en forældet værdi. ESLints exhaustive-deps-regel opdager dette.
ESLint-reglen exhaustive-deps
ESLint-reglen react-hooks/exhaustive-deps advarer, når du mangler effektens afhængigheder. Det er næsten altid korrekt at følge dens forslag – forældede afhængigheder forårsager fejl.
useEffect kontra useLayoutEffect
useEffect kører, efter browseren har tegnet. useLayoutEffect kører synkront efter DOM-ændringer, men før tegningen. Brug useLayoutEffect til at læse DOM-målinger for at undgå visuel flimren.
Flere effekter
Brug flere useEffect-kald til at adskille uvedkommende ansvarsområder. Hver effekt kan have sit eget afhængighedsarray og sin egen oprydningslogik.
// Separate effects for separate concerns:
useEffect(() => { document.title = `${count} items`; }, [count]);
useEffect(() => {
const sub = wsClient.subscribe(onMessage);
return () => sub.unsubscribe();
}, []);Kapløbsforhold – ignoreringsflaget
Når en effekt henter data baseret på props, kan tidligere forespørgsler blive færdige efter senere forespørgsler. Brug et oprydningsflag til at ignorere forældede svar.
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]);Dobbelt effekt i Strict Mode
React 18 Strict Mode monterer, afmonterer og monterer komponenter igen under udvikling for at afsløre fejl i oprydningen. Dine effekter kører to gange – det er tilsigtet og hjælper med at finde manglende oprydning.
Hvornår du ikke skal bruge useEffect
Brug ikke useEffect til at: 1) udlede tilstand fra props (beregn det under gengivelsen), 2) nulstille tilstand ved ændringer i props (brug key-prop), 3) opdatere tilstand ubetinget (det forårsager løkker). Spørg dig selv, når du er i tvivl: reagerer denne kode på en brugerhandling eller et eksternt system?
Hurtigt tjek
Hvornår kører en oprydningsfunktion i useEffect?
Opsummering: useEffect
Sideeffekter kører efter gengivelsen. Et tomt afhængighedsarray = én gang ved montering. Et afhængighedsarray = ved bestemte ændringer. Returnér en oprydningsfunktion for at forhindre lækager. Brug flere effekter til separate ansvarsområder. Ignoreringsflaget forhindrer forældede svar fra datahentning. Strict Mode kører effekten to gange for at teste oprydningen. Brug ikke useEffect til afledte værdier eller tilstand, som du kan beregne under gengivelsen.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 41
- Lektioner
- 163
Ofte stillede spørgsmål
Er lektionen “useEffect-grundlag: afhængigheder og oprydning” gratis?
Ja — hele teksten til “useEffect-grundlag: afhængigheder og oprydning” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Frontend Academy-kurset, skal du opgradere til CoddyKit PRO. Frontend Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “useEffect-grundlag: afhængigheder og oprydning”?
Kør sideeffekter efter rendering, styr hvornår de køres igen med dependency-arrayet, og returnér en cleanup-funktion for at undgå memory leaks. Du øver dig i Frontend Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Frontend Academy?
Der kræves ingen tidligere erfaring. Frontend Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.
Hvor lang tid tager lektionen “useEffect-grundlag: afhængigheder og oprydning”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Frontend Academy-lektion?
Ja. Alle Frontend Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- useEffect-grundlag: afhængigheder og oprydning
- Hent data ved mount
- Håndtering af loading- og error-state
- AbortController til oprydning