Geben Sie Beispiele dafür, was mit dem Hook useEffect gemacht werden kann, abgesehen von Serveranfragen.

Verwaltung des Seitenkopfzustands (document.title).

Abonnieren und Abbestellen von Browserereignissen (z.B. Fenstergröße ändern, Klicks außerhalb des Elements):

useEffect(() => {
  const handleResize = () => {
    console.log('Fenstergröße hat sich geändert');
  };
  window.addEventListener('resize', handleResize);

  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []); // Leeres Abhängigkeitsarray: Effekt wird einmal beim Mounten ausgeführt und beim Unmounten entfernt.

Arbeiten mit lokalem Speicher (Lesen/Schreiben von Daten):

useEffect(() => {
  const savedValue = localStorage.getItem('myInputValue');
  if (savedValue) {
    setInputValue(savedValue); // Es wird angenommen, dass es einen Zustand inputValue und eine Funktion setInputValue gibt
  }
}, []); // Wert beim Mounten laden.

useEffect(() => {
  localStorage.setItem('myInputValue', inputValue); // Beim Ändern von inputValue speichern.
}, [inputValue]); // Abhängigkeit von inputValue.

Initialisierung von Drittanbieterbibliotheken oder Komponenten.

Timer (setTimeout, setInterval) konfigurieren und bereinigen:

useEffect(() => {
  const timerId = setInterval(() => {
    console.log('Timer läuft');
  }, 1000);

  return () => {
    clearInterval(timerId); // Intervall beim Unmount bereinigen.
  };
}, []);

Überwachung von Prop- oder Zustandsänderungen und Reaktion darauf.

Fokus auf ein Element beim Mounten des Komponenten:

useEffect(() => {
  inputRef.current.focus(); // Es wird angenommen, dass es eine ref inputRef gibt
}, []);