Hooken useEffect lar oss synkronisere komponenten med eksterne faktorer/tjenester, inkludert henting av data, abonnementer, manuelle endringer osv.

Syntaks:

Det første argumentet (setup) er en pilstyrt funksjon som vil bli kjørt etter hver rendering. Det andre argumentet (dependencies) er et valgfritt array med avhengigheter. Hvis dependencies er oppgitt, vil effekten kun bli kjørt på nytt hvis en av avhengighetene har endret seg siden forrige rendering. Hvis arrayet med avhengigheter utelates, vil effekten kjøres etter hver rendering.

useEffect(setup, dependencies)

Siden vi vet at setup må være en pilstyrt funksjon og dependencies må være et array, får vi følgende oppføring av hooken useEffect.

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

Eksempel 1:

La oss opprette Articles-komponenten, som skal bruke useEffect-hooken for å tildele data til articles-tilstanden. Dette er en utmerket mulighet til å utforske den kraftige kombinasjonen av 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 komponenten benytter vi useEffect-hooken for å sikre at articles-tilstanden fylles med data. Som nevnt tidligere, kjøres useEffect-funksjonen etter hver rendering, noe som garanterer at data vises til brukeren dersom de er hentet. Dette sikrer en sømløs brukeropplevelse med oppdatert innhold.

Linje for linje-forklaring:

• Linje 1: Vi importerer useEffect og useState-hookene fra React-biblioteket for å benytte funksjonaliteten;
• Linje 2: Vi importerer funksjonen fetchData fra "../service/api". Denne funksjonen er ansvarlig for å gjøre et API-kall og hente data;
• Linje 4: Articles-komponenten defineres ved bruk av konvensjonell funksjonssyntaks;
• Linje 5: Vi initialiserer tilstanden ved hjelp av useState-hooken, som representerer startverdien til variabelen articles. I dette eksempelet er det et tomt array;
• Linje 7-15: Det reelle bruksområdet for useEffect-hooken;
  • Linje 7 og linje 15: er syntaksen. Det er slik vi bruker den;
  • Linje 8: funksjonen fetchData kalles. Denne funksjonen forventes å gjøre et API-kall og returnere et løfte (promise);
  • Linje 9-11: Når løftet oppfylles (then-blokken), mottas et resp-objekt. Dataen hentes ut fra resp ved å bruke resp.jokes, som settes inn i tilstanden articles ved hjelp av setArticles;
  • Linje 12-14: Hvis det oppstår en feil under API-kallet (i catch-blokken), logges den til konsollet med console.error.
• Linje 17-19: Markupen til komponenten rendres.

Fullstendig app-kode:

Eksempel 2:

La oss lage Counter-komponenten for å spore en counter-verdi. Oppgaven er å logge verdien til variabelen counter hver gang den endres. For å oppnå dette vil vi bruke useEffect-hooken med en avhengighetsliste som består av variabelen 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-hookene fra React-biblioteket for å benytte funksjonaliteten;
• Linje 3: Den konvensjonelle funksjonssyntaksen definerer "Counter"-komponenten;
• Linje 4: Vi initialiserer tilstanden ved å bruke useState-hooken, som representerer startverdien til count-variabelen. I dette eksempelet er den 0;
• Linje 6-8: Det faktiske bruksområdet for useEffect-hooken;
  • Linje 7: denne logikken vil kjøres hver gang verdien i avhengighetslisten endres. I dette tilfellet er det count-variabelen;
  • Linje 8: avhengighetslisten. Vi gir React beskjed om at når verdien til count-variabelen endres, skal koden inne i funksjonen til useEffect-hooken kjøres.
• Linje 14-19: Komponentens markup blir gjengitt.

Full app-kode:

Ta gjerne en titt i konsollen og observer utførelseslogikken til pilfunksjonen inne i useEffect-hooken. Pilfunksjonen kjøres først ved første rendering, og deretter hver gang verdien til counter-variabelen endres. Du kan verifisere denne oppførselen ved å se på de tilsvarende loggene i konsollen.