Umgang mit Seiteneffekten mit UseEffect

Der useEffect-Hook ermöglicht die Synchronisierung der Komponente mit externen Faktoren oder Diensten, einschließlich Datenabruf, Abonnements, manuellen Änderungen usw.

Syntax:

Das erste Argument (setup) ist eine Arrow-Funktion, die nach jedem Rendern ausgeführt wird. Das zweite Argument (dependencies) ist ein optionales Array von Abhängigkeiten. Wenn dependencies angegeben wird, 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, läuft der Effekt nach jedem Rendern.

useEffect(setup, dependencies)

Da bekannt ist, dass setup eine Arrow-Funktion und dependencies ein Array sein muss, ergibt sich folgender Aufbau des useEffect-Hooks.

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

Beispiel 1:

Erstellung der Komponente Articles, die den Hook useEffect verwendet, um Daten dem Zustand articles zuzuweisen. Dies bietet eine hervorragende Gelegenheit, die leistungsstarke Kombination der 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
  );
};

In dieser Komponente wird der Hook useEffect verwendet, um sicherzustellen, dass der Zustand articles mit Daten befüllt wird. Wie zuvor erwähnt, wird die Funktion useEffect nach jedem Rendern ausgeführt, wodurch garantiert wird, dass die Daten dem Benutzer angezeigt werden, sofern sie abgerufen wurden. Dies sorgt für eine nahtlose Benutzererfahrung mit stets aktuellen Inhalten.

Zeilenweise Erklärung:

• Zeile 1: Import der Hooks useEffect und useState aus der React-Bibliothek zur Nutzung ihrer Funktionalität;
• Zeile 2: Import der Funktion fetchData aus "../service/api". Diese Funktion ist für das Ausführen einer API-Anfrage und das Abrufen von Daten verantwortlich;
• Zeile 4: Definition der Komponente Articles mit der üblichen Funktionssyntax;
• Zeile 5: Initialisierung des Zustands mit dem Hook useState, der den Anfangswert der Variable articles darstellt. In diesem Beispiel ist es ein leeres Array;
• Zeilen 7-15: Der eigentliche Anwendungsfall des Hooks useEffect;
  • Zeile 7 und Zeile 15: Dies ist die Syntax. So wird der Hook verwendet;
  • Zeile 8: Aufruf der Funktion fetchData. Diese Funktion soll eine API-Anfrage ausführen und ein Promise zurückgeben;
  • Zeilen 9-11: Wenn das Promise aufgelöst wird (then-Block), wird ein resp-Objekt empfangen. Die Daten werden aus resp mit resp.jokes extrahiert und mit setArticles in den Zustand articles gesetzt;
  • Zeilen 12-14: Falls während der API-Anfrage ein Fehler auftritt (im catch-Block), wird dieser mit console.error in der Konsole ausgegeben.
• Zeilen 17-19: Das Markup der Komponente wird gerendert.

Beispiel 2:

Erstellung der Komponente Counter zur Verfolgung eines counter-Werts. Die Aufgabe besteht darin, den Wert der Variablen counter jedes Mal zu protokollieren, wenn er sich ändert. Dafür wird der Hook useEffect mit einem Abhängigkeitsarray verwendet, das die Variable counter enthält.

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: Import der Hooks useEffect und useState aus der React-Bibliothek zur Nutzung ihrer Funktionalität;
• Zeile 3: Die übliche Funktionssyntax definiert die Komponente "Counter";
• Zeile 4: Initialisierung des Zustands mit dem Hook useState, der den Anfangswert der Variable count darstellt. In diesem Beispiel ist es 0;
• Zeilen 6-8: Der eigentliche Anwendungsfall des Hooks useEffect;
  • Zeile 7: Diese Logik wird jedes Mal ausgeführt, wenn sich der Wert im Abhängigkeitsarray ändert. In diesem Fall ist es die Variable count;
  • Zeile 8: Abhängigkeitsarray. Damit wird React mitgeteilt, dass beim Ändern des Werts der Variable count der Code innerhalb der Funktion des Hooks useEffect ausgeführt werden soll.
• Zeilen 14-19: Das Markup der Komponente wird gerendert.

Bitte werfen Sie einen Blick auf die Konsole und beobachten Sie die Ausführungslogik der Pfeilfunktion innerhalb des useEffect-Hooks. Die Pfeilfunktion wird zunächst beim ersten Rendern ausgeführt und anschließend jedes Mal erneut aufgerufen, wenn sich der Wert der Variable counter ändert. Sie können dieses Verhalten anhand der entsprechenden Protokolle in der Konsole überprüfen.