Hooken useEffect gjør det mulig å 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 kjøres etter hver rendering. Det andre argumentet (dependencies) er et valgfritt array med avhengigheter. Hvis dependencies er oppgitt, vil effekten kun kjøres 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 pilfunksjon og dependencies må være et array, får vi følgende oppføring av useEffect-hooken.

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

Merk

React-komponenter er ofte avhengige av kombinasjonen av useEffect- og useState-hookene. Disse hookene fungerer sammen for å håndtere tilstand og sideeffekter i komponenter.

Eksempel 1:

La oss lage 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 tilstanden articles 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 hookene useEffect og useState fra React-biblioteket for å benytte deres funksjonalitet;
• Linje 2: Vi importerer funksjonen fetchData fra "../service/api". Denne funksjonen er ansvarlig for å utfø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 hooken useState, som representerer startverdien til variabelen articles. I dette eksempelet er det et tomt array;
• Linje 7-15: Det faktiske 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 å utfø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 feilen til konsollen med console.error.
• Linje 17-19: Markupen til komponenten rendres.

Full app-kode:

Eksempel 2:

Vi lager komponenten Counter for å holde styr på en counter-verdi. Målet er å logge verdien til variabelen counter hver gang den endres. For å oppnå dette benytter vi useEffect-hooken med en avhengighetsliste som inneholder 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>
  );
};

Forklaring linje for linje:

• Linje 1: Vi importerer hookene useEffect og useState fra React-biblioteket for å benytte deres funksjonalitet;
• Linje 3: Den konvensjonelle funksjonssyntaksen definerer "Counter"-komponenten;
• Linje 4: Vi initialiserer tilstanden ved å bruke useState-hooken, som representerer startverdien til variabelen count. I dette eksempelet er den 0;
• Linje 6-8: Selve bruken av useEffect-hooken;
  • Linje 7: Denne logikken kjøres hver gang verdien i avhengighetslisten endres. I dette tilfellet er det variabelen count;
  • Linje 8: Avhengighetslisten. Vi gir beskjed til React om at når verdien til variabelen count endres, skal koden inne i funksjonen til useEffect kjøres.
• Linje 14-19: Komponentens markup rendres.

Full app-kode:

Ta et øyeblikk for å inspisere konsollen og observere utførelseslogikken til pilfunksjonen inne i useEffect-hooken. Pilfunksjonen kjøres først ved første rendering, og deretter hver gang verdien til variabelen counter endres. Du kan bekrefte denne oppførselen ved å se på de tilsvarende loggene i konsollen.