useEffect-Grundlagen: Abhängigkeiten und Bereinigung
Führen Sie Side Effects nach dem Rendern aus, steuern Sie mit dem Dependency-Array, wann sie erneut ausgeführt werden, und geben Sie eine Cleanup-Funktion zurück, um Memory Leaks zu vermeiden.
useEffect-Grundlagen: Abhängigkeiten und Bereinigung ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was ist useEffect?
useEffect führt einen Seiteneffekt aus, nachdem React gerendert hat. Zu den Seiteneffekten gehören das Abrufen von Daten, das Abonnieren von Ereignissen, das Einrichten von Timern und die Interaktion mit externen APIs. Effects werden nach dem Paint ausgeführt, nicht während des Renderns.
Grundlegende Syntax
useEffect(effect, deps?). Die Effect-Funktion wird standardmäßig nach jedem Rendern ausgeführt. Übergeben Sie ein Dependency-Array, um zu steuern, wann sie ausgeführt wird.
import { useEffect } from 'react';
function Component() {
useEffect(() => {
console.log('Ran after every render');
});
}Das Dependency-Array steuert, wann der Effect ausgeführt wird
Leeres Array []: einmal nach dem Mounten ausführen. Nicht leeres Array [a, b]: ausführen, wenn sich a oder b ändern. Kein Array: nach jedem Rendern ausführen (was Sie nur selten möchten).
// Run once on mount:
useEffect(() => {
fetchInitialData();
}, []);
// Run when userId changes:
useEffect(() => {
fetchUser(userId);
}, [userId]);
// Run after every render (usually a bug):
useEffect(() => {
trackPageView();
});Die Cleanup-Funktion
Geben Sie aus useEffect eine Funktion zurück, um eine Bereinigung auszuführen: Entfernen Sie Event-Listener, kündigen Sie Abonnements und löschen Sie Timer. Die Bereinigung läuft vor dem nächsten Effect und beim Unmounten.
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);
};
}, []);Veraltete Closures in Dependencies
Effects schließen die Werte ein, auf die sie zum Zeitpunkt ihrer Erstellung zugreifen. Wenn Sie innerhalb eines Effects einen State- oder Prop-Wert lesen, ohne ihn als Dependency aufzulisten, sehen Sie einen veralteten Wert. Die exhaustive-deps-Regel von ESLint erkennt dies.
Die ESLint-Regel exhaustive-deps
Die ESLint-Regel react-hooks/exhaustive-deps warnt, wenn Effect-Dependencies fehlen. Ihren Vorschlägen zu folgen ist fast immer richtig – veraltete Dependencies verursachen Fehler.
useEffect vs. useLayoutEffect
useEffect wird ausgeführt, nachdem der Browser den Inhalt gezeichnet hat. useLayoutEffect wird synchron nach den DOM-Mutationen und vor dem Zeichnen ausgeführt. Verwenden Sie useLayoutEffect, um DOM-Messwerte zu lesen und sichtbares Flackern zu vermeiden.
Mehrere Effects
Verwenden Sie mehrere useEffect-Aufrufe, um voneinander unabhängige Belange zu trennen. Jeder Effect kann sein eigenes Dependency-Array und seine eigene Bereinigungslogik haben.
// Separate effects for separate concerns:
useEffect(() => { document.title = `${count} items`; }, [count]);
useEffect(() => {
const sub = wsClient.subscribe(onMessage);
return () => sub.unsubscribe();
}, []);Race Conditions – das Ignore-Flag
Wenn ein Effect Daten anhand von Props abruft, können frühere Anfragen nach späteren abgeschlossen werden. Verwenden Sie ein Bereinigungs-Flag, um veraltete Antworten zu ignorieren.
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]);Doppelte Effects im Strict Mode
Der Strict Mode von React 18 mountet, unmountet und mountet Komponenten in der Entwicklung erneut, um Fehler bei der Bereinigung sichtbar zu machen. Ihre Effects werden zweimal ausgeführt – das ist beabsichtigt und hilft dabei, fehlende Bereinigungen zu erkennen.
Wann Sie useEffect nicht verwenden sollten
Verwenden Sie useEffect nicht, um: 1) State aus Props abzuleiten (berechnen Sie ihn während des Renderns), 2) State bei Änderungen von Props zurückzusetzen (verwenden Sie eine Key-Prop), 3) State bedingungslos zu aktualisieren (das verursacht Schleifen). Wenn Sie unsicher sind, fragen Sie sich: Reagiert dieser Code auf ein Benutzerereignis oder auf ein externes System?
Kurztest
Wann wird die Cleanup-Funktion von useEffect ausgeführt?
Zusammenfassung: useEffect
Seiteneffekte werden nach dem Rendern ausgeführt. Leeres Dependency-Array = einmal beim Mounten. Dependency-Array = bei bestimmten Änderungen. Geben Sie eine Cleanup-Funktion zurück, um Leaks zu verhindern. Verwenden Sie mehrere Effects für voneinander unabhängige Belange. Das Ignore-Flag verhindert veraltete Antworten von Datenabrufen. Der Strict Mode führt Effects doppelt aus, um die Bereinigung zu testen. Verwenden Sie useEffect nicht für abgeleitete Werte oder State, den Sie während des Renderns berechnen können.
Häufig gestellte Fragen
Ist die Lektion „useEffect-Grundlagen: Abhängigkeiten und Bereinigung“ kostenlos?
Ja — der vollständige Text von „useEffect-Grundlagen: Abhängigkeiten und Bereinigung“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „useEffect-Grundlagen: Abhängigkeiten und Bereinigung“?
Führen Sie Side Effects nach dem Rendern aus, steuern Sie mit dem Dependency-Array, wann sie erneut ausgeführt werden, und geben Sie eine Cleanup-Funktion zurück, um Memory Leaks zu vermeiden. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Frontend Academy zu starten?
Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „useEffect-Grundlagen: Abhängigkeiten und Bereinigung“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?
Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- useEffect-Grundlagen: Abhängigkeiten und Bereinigung
- Daten beim Mounten abrufen
- Loading- und Error-States behandeln
- AbortController zur Bereinigung