Håndtering af Sideeffekter med useEffect

Hooken useEffect 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, som udføres 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 pilesyntaks-funktion og dependencies skal være et array, får vi følgende optegnelse af hooken useEffect.

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

Eksempel 1:

Opret Articles-komponenten, som vil benytte 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
  );
};

Inden for 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 tilstanden 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 promiset bliver opfyldt (then-blok), modtages et resp-objekt. Dataene udtrækkes fra resp ved hjælp af resp.jokes, som sættes ind i articles-tilstanden ved hjælp af 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 gengivet.

Fuld app-kode:

Eksempel 2:

Vi opretter Counter-komponenten til at spore 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 tilstanden ved hjælp af useState hook, hvilket repræsenterer den initiale værdi af variablen count. I dette eksempel er den 0;
• Linje 6-8: Det faktiske anvendelsestilfælde for useEffect hook;
  • Linje 7: denne logik udføres, hver gang værdien i afhængighedsarrayet ændres. I dette tilfælde er det variablen count;
  • Linje 8: afhængighedsarray. Vi informerer React om, at når værdien af variablen count ændres, skal koden inde i useEffect hook-funktionen køres.
• Linje 14-19: Komponentens markup bliver gengivet.

Fuld app-kode:

Tag venligst et øjeblik til at inspicere konsollen og observere eksekveringslogikken 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.