javascript / intermediate
Snippet
Effekt-Bereinigung mit AbortController
Die Verwendung von AbortController in useEffect verhindert Speicherlecks und State-Updates auf unmontierten Komponenten, indem ausstehende Fetch-Anfragen abgebrochen werden.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
useEffect(() => {const controller = new AbortController();async function fetchData() {try {const res = await fetch('/api/data', { signal: controller.signal });const data = await res.json();setData(data);} catch (err) {if (err.name !== 'AbortError') console.error(err);}}fetchData();return () => controller.abort();}, [id]);
nextjs
Erklärung
1
signal: controller.signal
Verknüpft die Fetch-Anfrage mit dem Signal des Abort-Controllers.
2
return () => controller.abort();
Die Cleanup-Funktion wird ausgelöst, wenn die Komponente unmontiert wird oder sich Abhängigkeiten ändern.