Postat acum 1 zi
typescript
useEffect(() => {
const ctrl = new AbortController();
fetch("/api/posts", { signal: ctrl.signal })
.then((r) => r.json())
.then(setPosts)
.catch((e) => { if (e.name !== "AbortError") console.error(e); });
return () => ctrl.abort(); // cleanup — anulează fetch-ul dacă componenta se unmount-ează
}, []);Problema
Un fetch declanșat în useEffect continuă să ruleze și după ce componenta e unmount-ată. Rezultatul: setState pe o componentă "moartă" → warning sau chiar bug.
Soluția
AbortController + cleanup function.
Aceeași logică se aplică și pentru:
setInterval/setTimeout→clearInterval/clearTimeout- subscribe la un store → unsubscribe
addEventListener→removeEventListener
Rule of thumb
Dacă în useEffect pornești ceva, trebuie să-l oprești în return.