Der useEffect Hook ermöglicht es uns, die Komponente mit externen Faktoren/Diensten zu synchronisieren, einschließlich Datenabruf, Abonnements, manuellen Änderungen usw.

Syntax:

Das erste Argument (setup) ist eine Pfeilfunktion, die nach jedem Rendern ausgeführt wird. Das zweite Argument (dependencies) ist ein optionales Array von Abhängigkeiten. Wenn die dependencies angegeben sind, wird der Effekt nur erneut ausgeführt, wenn sich eine der Abhängigkeiten seit dem letzten Rendern geändert hat. Wenn das Abhängigkeits-Array weggelassen wird, wird der Effekt nach jedem Rendern ausgeführt.

useEffect(setup, dependencies)

Da wir wissen, dass setup eine Pfeilfunktion und dependencies ein Array sein muss, erhalten wir den folgenden Datensatz des useEffect Hooks.

useEffect(() => {
  // Something that we need to do
  // after the component is rendered or updated
}, [<optional_dependencies>])

Hinweis

React-Komponenten verlassen sich oft auf die Kombination der Hooks useEffect und useState. Diese Hooks arbeiten Hand in Hand, um den Zustand und die Nebeneffekte innerhalb von Komponenten zu verwalten.

Beispiel 1:

Erstellen wir die Articles-Komponente, die den useEffect-Hook verwenden wird, um Daten dem articles-Zustand zuzuweisen. Dies ist eine ausgezeichnete Gelegenheit, die leistungsstarke Kombination von React-Hooks zu erkunden.

import { useEffect, useState } from "react";
import fetchData from "../service/api";

const Articles = () => {
  const [articles, setArticles] = useState([]);

  useEffect(() => {
    fetchData()
      .then((resp) => {
        setArticles(resp.jokes);
      })
      .catch((error) => {
        console.error(error);
      });
  }, []);

  return (
    // Render some markup based on the articles data
  );
};

Innerhalb dieser Komponente nutzen wir den useEffect-Hook, um sicherzustellen, dass der articles-Zustand mit Daten gefüllt wird. Wie bereits erwähnt, wird die useEffect-Funktion nach jedem Rendern ausgeführt, was garantiert, dass Daten angezeigt werden, wenn sie abgerufen werden. Dies gewährleistet ein nahtloses Benutzererlebnis mit aktuellen Inhalten.

Zeilenweise Erklärung:

• Zeile 1: Wir importieren die Hooks useEffect und useState aus der React-Bibliothek, um deren Funktionalität zu nutzen;
• Zeile 2: Wir importieren die Funktion fetchData aus "../service/api". Diese Funktion ist verantwortlich für das Stellen einer API-Anfrage und das Abrufen von Daten;
• Zeile 4: Die Articles-Komponente wird mit der konventionellen Funktionssyntax definiert;
• Zeile 5: Wir initialisieren den Zustand mit dem useState-Hook, der den Anfangswert der articles-Variable darstellt. In diesem Beispiel ist es ein leeres Array;
• Zeilen 7-15: Der eigentliche Anwendungsfall des useEffect-Hooks;
  • Zeile 7 und Zeile 15: ist die Syntax. So werden wir es verwenden;
  • Zeile 8: die Funktion fetchData wird aufgerufen. Diese Funktion soll eine API-Anfrage stellen und ein Versprechen zurückgeben;
  • Zeilen 9-11: Wenn das Versprechen aufgelöst wird (then-Block), erhält es ein resp-Objekt. Die Daten werden aus resp mit resp.jokes extrahiert und mit setArticles in den articles-Zustand gesetzt;
  • Zeilen 12-14: Wenn es einen Fehler während der API-Anfrage gibt (im catch-Block), wird er mit console.error in der Konsole protokolliert.
• Zeilen 17-19: Das Markup der Komponente wird gerendert.

Vollständiger App-Code:

Beispiel 2:

Lassen Sie uns die Counter-Komponente erstellen, um einen counter-Wert zu verfolgen. Die Aufgabe besteht darin, den Wert der counter-Variablen jedes Mal zu protokollieren, wenn er sich ändert. Um dies zu erreichen, werden wir den useEffect-Hook mit einem Abhängigkeitsarray verwenden, das aus der counter-Variablen besteht.

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

const Counter = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("Count has changed:", count);
  }, [count]);

  const handleIncrement = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>Increment</button>
    </div>
  );
};

Zeilenweise Erklärung:

• Zeile 1: Wir importieren die useEffect- und useState-Hooks aus der React-Bibliothek, um deren Funktionalität zu nutzen;
• Zeile 3: Die konventionelle Funktionssyntax definiert die "Counter"-Komponente;
• Zeile 4: Wir initialisieren den Zustand mit dem useState-Hook, der den Anfangswert der count-Variablen darstellt. In diesem Beispiel ist es 0;
• Zeilen 6-8: Der tatsächliche Anwendungsfall des useEffect-Hooks;
  • Zeile 7: Diese Logik tritt auf, wann immer sich der Wert im Abhängigkeitsarray ändert. In diesem Fall ist es die count-Variable;
  • Zeile 8: Abhängigkeitsarray. Wir lassen React wissen, dass, wenn sich der Wert der count-Variablen ändert, der Code innerhalb der useEffect-Hook-Funktion ausgeführt wird.
• Zeilen 14-19: Das Markup der Komponente wird gerendert.

Vollständiger App-Code:

Bitte nehmen Sie sich einen Moment Zeit, um die Konsole zu inspizieren und die Ausführungslogik der Pfeilfunktion innerhalb des useEffect-Hooks zu beobachten. Die Pfeilfunktion wird zuerst beim initialen Rendern ausgeführt und dann erneut aufgerufen, wann immer sich der Wert der counter-Variable ändert. Sie können dieses Verhalten überprüfen, indem Sie die entsprechenden Protokolle in der Konsole beobachten.