Håndtering af Sideeffekter med useEffect

useEffect-hooket gør det muligt at synkronisere komponenten med eksterne faktorer/tjenester, herunder datahentning, abonnementer, manuelle ændringer osv.

Syntaks:

Det første argument (setup) er en pilesyntaks-funktion (arrow function), som vil blive udført efter hver rendering. Det andet argument (dependencies) er et valgfrit array af afhængigheder. Hvis dependencies angives, vil effekten kun blive genudført, hvis en af afhængighederne har ændret sig siden sidste rendering. Hvis arrayet med afhængigheder udelades, vil effekten køre efter hver rendering.

useEffect(setup, dependencies)

Da vi ved, at setup skal være en arrow function, og dependencies skal være et array, får vi følgende opbygning af useEffect-hooket.

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

Eksempel 1:

Opretning af Articles-komponenten, som anvender useEffect-hooken til at tildele data til articles-tilstanden. Dette er en fremragende mulighed for at udforske den kraftfulde kombination af React-hooks.

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
  );
};

I denne komponent anvendes useEffect-hooken til at sikre, at articles-tilstanden bliver udfyldt med data. Som nævnt tidligere, udføres useEffect-funktionen efter hver rendering, hvilket garanterer, at data vises for brugeren, hvis de er hentet. Dette sikrer en problemfri brugeroplevelse med opdateret indhold.

Linje for linje forklaring:

• Linje 1: Vi importerer useEffect og useState hooks fra React-biblioteket for at udnytte dets funktionalitet;
• Linje 2: Vi importerer funktionen fetchData fra "../service/api". Denne funktion er ansvarlig for at foretage en API-anmodning og hente data;
• Linje 4: Articles-komponenten defineres ved hjælp af den konventionelle funktionssyntaks;
• Linje 5: Vi initialiserer state ved hjælp af useState hook, hvilket repræsenterer den initiale værdi af variablen articles. I dette eksempel er det et tomt array;
• Linje 7-15: Det reelle brugsscenarie for useEffect hook;
  • Linje 7 og linje 15: er syntaksen. Det er sådan, vi vil bruge det;
  • Linje 8: funktionen fetchData kaldes. Denne funktion forventes at foretage en API-anmodning og returnere et promise;
  • Linje 9-11: Når promise bliver opfyldt (then-blok), modtages et resp-objekt. Dataen udtrækkes fra resp ved hjælp af resp.jokes, som sættes ind i articles state med setArticles;
  • Linje 12-14: Hvis der opstår en fejl under API-anmodningen (i catch-blokken), logges den til konsollen med console.error.
• Linje 17-19: Komponentens markup bliver renderet.

Eksempel 2:

Vi opretter Counter-komponenten til at holde styr på en counter-værdi. Opgaven er at logge værdien af variablen counter, hver gang den ændres. For at opnå dette vil vi benytte useEffect hook med et afhængighedsarray bestående af variablen counter.

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>
  );
};

Linje for linje forklaring:

• Linje 1: Vi importerer useEffect og useState hooks fra React-biblioteket for at udnytte dets funktionalitet;
• Linje 3: Den konventionelle funktionssyntaks definerer "Counter"-komponenten;
• Linje 4: Vi initialiserer state ved hjælp af useState hook, hvilket repræsenterer den initiale værdi af variablen count. I dette eksempel er det 0;
• Linje 6-8: Det faktiske brugsscenarie for useEffect hook;
  • Linje 7: denne logik vil blive udført, hver gang værdien i afhængighedsarrayet ændres. I dette tilfælde er det variablen count;
  • Linje 8: afhængighedsarray. Vi lader React vide, at når værdien af variablen count ændres, skal koden inde i funktionen til useEffect køres.
• Linje 14-19: Komponentens markup bliver renderet.

Tag et øjeblik til at inspicere konsollen og observere udførselslogikken for pilfunktionen inde i useEffect-hooken. Pilfunktionen udføres først ved den indledende rendering og kaldes derefter igen, hver gang værdien af variablen counter ændres. Du kan bekræfte denne adfærd ved at observere de tilsvarende logs i konsollen.