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

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

Bemærk

React-komponenter er ofte afhængige af kombinationen af useEffect- og useState-hooks. Disse hooks arbejder sammen for at håndtere tilstand og sideeffekter i komponenter.

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 for at sikre, at articles-tilstanden bliver udfyldt med data. Som tidligere nævnt, 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: Import af useEffect og useState hooks fra React-biblioteket for at udnytte dets funktionalitet;
• Linje 2: Import af fetchData funktionen fra "../service/api". Denne funktion står for at foretage en API-anmodning og hente data;
• Linje 4: Articles-komponenten defineres ved brug af den konventionelle funktionssyntaks;
• Linje 5: Initialisering af tilstand ved hjælp af useState-hooken, som repræsenterer startværdien for variablen articles. I dette eksempel er det et tomt array;
• Linje 7-15: Det reelle anvendelsestilfælde for useEffect-hooken;
  • Linje 7 og linje 15: er syntaksen. Det er sådan, vi vil bruge den;
  • Linje 8: fetchData-funktionen kaldes. Denne funktion forventes at foretage en API-anmodning og returnere et promise;
  • Linje 9-11: Når promiset opfyldes (then-blok), modtages et resp-objekt. Dataen udtrækkes fra resp ved hjælp af resp.jokes, som sættes ind i articles-tilstanden 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 gengivet.

Fuld app-kode:

Eksempel 2:

Opret 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 anvendes useEffect-hooken 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: Import af useEffect og useState hooks fra React-biblioteket for at udnytte dets funktionalitet;
• Linje 3: Den konventionelle funktionssyntaks definerer "Counter"-komponenten;
• Linje 4: Initialisering af state ved brug af useState-hooken, som repræsenterer den indledende værdi af variablen count. I dette eksempel er den 0;
• Linje 6-8: Den faktiske anvendelse af useEffect-hooken;
  • 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-hookfunktionen køres.
• Linje 14-19: Komponentens markup bliver gengivet.

Fuld app-kode:

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 logninger i konsollen.