javascript / beginner
Snippet
Verwaltung von Asynchronen Timern und Bereinigung mit useEffect
Asynchrone Aufgaben wie setTimeout innerhalb von useEffect müssen mit einer Bereinigungsfunktion gekoppelt werden. Die Rückgabe einer Cleanup-Funktion verhindert Speicherlecks und veraltete Zustandsaktualisierungen, falls die Komponente vor Ablauf des Timers entfernt wird.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import React, { useState, useEffect } from 'react';function DelayedNotice() {const [isVisible, setIsVisible] = useState(false);useEffect(() => {const timerId = setTimeout(() => {setIsVisible(true);}, 3000);return () => clearTimeout(timerId);}, []);return <div>{isVisible && <p>Notice: Session active!</p>}</div>;}export default DelayedNotice;
react
Erklärung
1
const timerId = setTimeout(() => { setIsVisible(true); }, 3000);
Plant eine asynchrone Zustandsaktualisierung nach Ablauf von 3000 Millisekunden.
2
return () => clearTimeout(timerId);
Gibt eine Bereinigungsfunktion zurück, um den Timer abzubrechen, falls die Komponente unmounted wird.
3
}, []);
Übergibt ein leeres Abhängigkeits-Array, damit der Effekt nur einmal nach dem ersten Rendern ausgeführt wird.