useEffect kör biverkningar — arbete som når utanför Reacts rendering, som datahämtning, prenumerationer, timers eller manuella DOM-uppdateringar. Det körs efter att komponenten renderas, vilket håller biverkningar utanför render-kroppen (render måste förbli ren).
Dependency array styr tidpunkten
useEffect(() => {
document.title = `Count: ${count}`;
}, [count]); // ← dependency array
[count]→ körs efter första rendring och närcountändras.[](tom) → körs en gång efter mount (bra för engångsinstallation).- utelämnad → körs efter varje rendring (sällan vad du vill).
Rengöring: returnera en funktion
Om en effekt ställer in något som behöver rensas, returnera en rengöringsfunktion. React anropar den före nästa effektkörning och när komponenten unmountas:
useEffect(() => {
const id = setInterval(() => setN(n => n + 1), 1000);
return () => clearInterval(id); // cleanup → prevents a leaked timer
}, []);
Varför rengöring är viktigt
Utan det skulle varje omkörning lägga till en annan timer/prenumeration och aldrig ta bort den gamla — en klassisk minneslecka. Livscykeln för en [dep] effekt är: kör effekt → (dep ändras) → kör rengöring → kör effekt igen.
Tips: använd inte effekter för saker du kan beräkna under rendering (härleda värden istället) och inkludera varje värde som effekten läser i dependency array (lint-regeln react-hooks/exhaustive-deps hjälper).