useEffect Hook – Nebeneffekte in React

React bietet eine Vielzahl von Werkzeugen und Konzepten, die das Entwerfen von benutzerfreundlichen und effizienten Webanwendungen zum Kinderspiel machen. Heute lernen wir „Nebeneffekte“ in React kennen – den useEffect Hook.

Worum handelt es sich bei useEffect? Einfach ausgedrückt, ist useEffect ein Hook, der euch erlaubt, Nebeneffekte in funktionalen Komponenten zu steuern. Ihr fragt euch vielleicht, was “Nebeneffekte” sind. Im Kontext von React sind das Funktionen, die etwas anderes tun als nur den UI-Zustand (schaut euch dazu meinen Artikel zu useState an) zu ändern – zum Beispiel das Abrufen von Daten.

Um zu verdeutlichen, wie useEffect funktioniert, betrachten wir ein einfaches Beispiel. Stellt euch vor, ihr möchtet Daten von einer API abrufen, sobald eure Komponente gerendert wird:

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    document.title = "Neuer Titel";
  }, []);

  return (
    <div>
      Willkommen auf meiner Webseite!
    </div>
  );
}

In diesem einfachen Beispiel benutzen wir den useEffect Hook, um den Titel der Webseite zu ändern, wenn die Komponente das erste Mal gerendert wird. Der leere Array (also die beiden eckigen Klammern []) als zweites Argument von useEffect bedeutet, dass der Effekt nur beim ersten Rendern ausgeführt wird.

Retro-Bit Official SEGA Saturn 2.4Ghz Wireless Arcade Pad…*
  • Offiziell lizenziert 2, 4-ghz-wireless-controller
  • kompatibel mit SEGA saturn, SEGA Mega Drive Mini, PC/Mac, PS3 und Switch

Letzte Aktualisierung am 16.04.2024 / Affiliate Links / Bilder von der Amazon Product Advertising API

Auf die Änderung einer Variable reagieren

Wir können einen Effekt aber nicht nur beim ersten Rendern einer Komponente ausführen. useEffect kann auch bei der Änderung einer Variable ausgeführt werden. Auch hier nochmal der Hinweis auf meinen Artikel zum useState Hook. Ein weiteres Code-Beispiel:

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

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

  useEffect(() => {
    document.title = `Du hast ${count} mal geklickt`;
  }, [count]); 
 
  return (
    <div>
      <p>Du hast {count} mal geklickt</p>
      <button onClick={() => setCount(count + 1)}>Klicke mich</button>
    </div>
  );
}

In diesem Beispiel haben wir eine Zählervariable count, die mit useState initialisiert wird. Jedes Mal, wenn der Button geklickt wird, erhöht sich count um eins. Der useEffect Hook reagiert auf jede Änderung der count-Variable und ändert den Seitentitel entsprechend. Das useEffect überhaupt auf die count Variable „hört“, erreichen wir durch das Setzen von count als Argument, also der Wert in den eckigen Klammern []. Zur Erinnerung: gebt ihr hier kein Argument an, wird useEffect nur beim ersten Rendern ausgelöst.

Obwohl es auf den ersten Blick komplex erscheinen mag, wird es nach etwas Übung ein vertrauter und unverzichtbarer Teil eurer React-Werkzeugkiste.

Weitergehende Informationen findet ihr in der englischsprachigen Dokumentation von React:

https://react.dev/reference/react/useEffect

Ähnliche Beiträge

Beitrag teilen

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Cookie Consent Banner von Real Cookie Banner