Join the discussion
Comments
Loading comments...
Cookie preferences
We use essential cookies for sign-in and preferences. With your permission, we also use basic analytics to improve lessons.
Join the discussion
Loading comments...
We use essential cookies for sign-in and preferences. With your permission, we also use basic analytics to improve lessons.
Mount-, Update- und Unmount-Phasen — sehen Sie, welche Hooks und Effekte in jeder Phase ausgelöst werden.
Jede React-Komponente durchläuft drei Lebenszyklusphasen: Mount (erstes Rendering in das DOM), Update (erneutes Rendering aufgrund von Zustand- oder Prop-Änderungen) und Unmount (Entfernung aus dem DOM). Mit Hooks werden diese Phasen durch useEffect, useLayoutEffect und Bereinigungsfunktionen ausgedrückt, anstatt durch Klassen-Lifecycle-Methoden.
React ruft Ihre Funktionskomponente auf, wertet JSX aus und fügt die resultierenden DOM-Knoten ein. useState-Initialisierer werden ausgeführt, useRef-Objekte werden erstellt. Nach der DOM-Einfügung wird useLayoutEffect synchron ausgeführt, dann useEffect asynchron nach dem Paint.
Wenn setState oder eine neue Prop eintrifft, stellt React ein Re-Rendering in die Warteschlange. Beim Re-Rendering werden Hooks in derselben Reihenfolge wie beim Mount aufgerufen. React vergleicht neue und alte Ausgabe und aktualisiert das DOM. Vor dem erneuten Ausführen von Effects führt React die Bereinigungsfunktionen der vorherigen Render-Effects aus.
Bevor jeder Effect erneut ausgeführt wird (und beim Unmount) ruft React die Bereinigungsfunktion des vorherigen Effects auf. Dies ist entscheidend für das Löschen von Timern, das Abbrechen von Fetches und das Abbestellen von Ereignissen.
Wenn eine Komponente entfernt wird (bedingte Rendering, Routenwechsel usw.), führt React alle Bereinigungsfunktionen aus — useEffect-Bereinigung, dann useLayoutEffect-Bereinigung. DOM-Knoten werden aus dem Dokument entfernt.
Leeres Deps-Array: läuft einmal nach dem Mount. Bereinigung läuft beim Unmount. Entspricht componentDidMount + componentWillUnmount.
Läuft nach dem Mount UND immer wenn dep sich ändert. Bereinigung läuft vor jedem Neuaufruf und beim Unmount.
Kein Deps-Array: läuft nach jedem Rendering. Selten das Gewünschte — verursacht Endlosschleifen, wenn Zustandsänderungen ausgelöst werden.
Gleiche Signatur wie useEffect, wird aber synchron nach DOM-Mutationen vor dem Paint ausgeführt. Für DOM-Messungen verwenden.
Die von einem useEffect-Callback zurückgegebene Funktion. React ruft sie vor dem nächsten Effect-Aufruf und beim Unmount auf.
1function Component({ userId }) {2 const [data, setData] = useState(null);34 useEffect(() => {5 // Runs after mount and when userId changes6 let cancelled = false;78 fetch(`/api/user/${userId}`)9 .then(res => res.json())10 .then(json => {11 if (!cancelled) setData(json); // guard against stale closure12 });1314 // Cleanup: cancel if userId changes before fetch resolves15 return () => { cancelled = true; };16 }, [userId]); // re-runs when userId changes1718 // Runs on unmount19 useEffect(() => {20 return () => console.log('Component unmounted');21 }, []);22}
Das Verstehen des Lifecycle-Timings verhindert die häufigsten React-Fehler: Daten abrufen ohne Bereinigung (verursacht setState-Warnungen bei unmounted Komponenten), vergessen Timer zu löschen (verursacht Speicherlecks) und Effects zu oft oder zu selten durch falschen Einsatz des Dependency-Arrays ausführen.
A user profile page fetches user data on mount. If a user rapidly clicks through profiles (User A → User B → User C), the displayed data sometimes shows User A's data on User C's page.
Each navigation triggers a re-mount with a new userId. The useEffect fires 3 fetch calls, but they resolve out of order: User B (fast) → User C (fast) → User A (slow). The last-resolving fetch (User A) overwrites the correct data.
Use the cleanup function to set a `cancelled` flag. When userId changes, the previous effect's cleanup runs before the new effect, marking the old fetch as stale. The guard `if (!cancelled) setData(json)` prevents stale responses from updating state.
Takeaway: The cleanup function in useEffect isn't just for unmounting — it runs before EVERY re-execution of the effect. This makes it the perfect place to cancel async operations and prevent race conditions.
A chart component adds a `window.resize` event listener on mount to recalculate dimensions. After navigating away, the browser's memory usage keeps climbing and console shows 'setState on unmounted component' warnings.
The event listener was added in useEffect but never cleaned up. The component unmounts, but the listener still holds a reference to the component's state setter, creating a memory leak and triggering warnings on resize.
Return a cleanup function from useEffect that removes the event listener. The cleanup runs during the Unmount phase, before DOM removal, ensuring no orphaned listeners persist. Apply the same pattern for WebSocket connections, interval timers, and IntersectionObserver instances.
Takeaway: Every subscription, listener, or timer created in useEffect MUST have a corresponding cleanup. Think of mount/unmount as a pair: every 'set up' action needs a corresponding 'tear down' action.