Verwendung des 'useEffect'-Hooks in React

Der 'useEffect'-Hook ist ein integrierter Hook in der React-Bibliothek, der dafür ausgelegt ist, Nebeneffekte in funktionalen Komponenten auszuführen. Aber was genau versteht man unter einem 'Nebeneffekt'?

Ein 'Nebeneffekt' ist eine Aktion, die außerhalb der Komponente durchgeführt wird, nachdem die Render-Methode aufgerufen wurde. Dazu können beispielsweise Datenabrufen, Abonnements oder manuelle Änderungen des DOM gehören.

Vor Hooks wurde dieser Anwendungsfall oft in den Lebenszyklusmethoden einer Klasse abgehandelt, z.B. componentDidMount, componentDidUpdate und componentWillUnmount, aber nun kann dies elegant in einer funktionalen Komponente mit dem useEffect-Hook erreicht werden.

Hier ist ein einfaches Beispiel:

import React, { useState, useEffect } from "react";

function Example() {
  const [count, setCount] = useState(0);

  // ähnlich wie componentDidMount und componentDidUpdate:
  useEffect(() => {
    // Aktualisiert den Dokumententitel mit der Anzahl der Klicks
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

In diesem Beispiel setzt der useEffect-Hook den Dokumententitel nach jedem Render-Vorgang der Komponente, der davon ausgelöst wird, dass auf den Button geklickt wird. Es handelt sich dabei um einen 'Nebeneffekt', da er außerhalb der Komponente auf den gesamten DOM einwirkt.

Es ist wichtig zu beachten, dass der useEffect-Hook nach der Rendering-Phase ausgeführt wird, wodurch sichergestellt wird, dass er nicht den Render-Vorgang oder die Performance der Komponente blockiert.

Best Practices oder zusätzliche Einblicke:

• Es ist möglich, mehrere useEffect-Hooks in einer einzigen Komponente zu verwenden, um verschiedene Nebeneffekte voneinander zu trennen.
• Sie können eine saubere Funktion zurückgeben, um den Effekt aufzuräumen, bevor die Komponente unmontiert wird, ähnlich der Funktion componentWillUnmount in Klassenkomponenten.
• Wenn Sie die Abhängigkeiten des useEffect-Hooks als leeren Array ([]) übergeben, wird der Effekt nur einmal ausgeführt, ähnlich wie componentDidMount.
• Vermeiden Sie die Verwendung von 'useEffect' für Vorgänge, die den Rendervorgang blockieren könnten, wie beispielsweise CPU-intensive Berechnungen.