Håndtering av Sideeffekter med useEffect

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:

Vi skal lage Articles-komponenten, som benytter useEffect-hooken for å tilordne 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 å utnytte funksjonaliteten;
• Linje 2: Vi importerer fetchData-funksjonen 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 articles-variabelen. 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: fetchData-funksjonen 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 articles-tilstanden med setArticles;
  • Linje 12-14: Hvis det oppstår en feil under API-kallet (i catch-blokken), logges den til konsollen med console.error.
• Linje 17-19: Komponentens markup rendres.

Full app-kode:

Eksempel 2:

La oss lage Counter-komponenten for å spore en counter-verdi. Oppgaven er å logge verdien til counter-variabelen hver gang den endres. For å oppnå dette vil vi bruke useEffect-hooken med en avhengighetsliste som består av counter-variabelen.

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 deres funksjonalitet;
• 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 eksemplet er den 0;
• Linje 6-8: Den faktiske bruken av useEffect-hooken;
  • Linje 7: denne logikken vil kjøres hver gang verdien i avhengighetsarrayen endres. I dette tilfellet er det count-variabelen;
  • Linje 8: avhengighetsarray. Vi informerer React 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 et øyeblikk for å inspisere konsollen og observere kjørselslogikken 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 å observere de tilsvarende loggene i konsollen.