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

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

const timerId = setTimeout(() => { setIsVisible(true); }, 3000);

Plant eine asynchrone Zustandsaktualisierung nach Ablauf von 3000 Millisekunden.

return () => clearTimeout(timerId);

Gibt eine Bereinigungsfunktion zurück, um den Timer abzubrechen, falls die Komponente unmounted wird.

}, []);

Übergibt ein leeres Abhängigkeits-Array, damit der Effekt nur einmal nach dem ersten Rendern ausgeführt wird.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Anfänger →

Verwaltung von Asynchronen Timern und Bereinigung mit useEffect

Verwandt