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 pilstedsfunksjon 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 pilstedsfunksjon og dependencies må være et array, får vi følgende oppsett for hooken useEffect.

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

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 bruker 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 gir 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 funksjonen fetchData fra "../service/api". Denne funksjonen har ansvaret 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 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 å gjøre et API-kall og returnere et løfte (promise);
  • Linje 9-11: Når løftet er oppfylt (then-blokken), mottas et resp-objekt. Dataen hentes ut fra resp ved å bruke resp.jokes, som settes inn i articles-tilstanden ved hjelp av setArticles;
  • Linje 12-14: Hvis det oppstår en feil under API-kallet (i catch-blokken), logges det til konsollen med console.error.
• Linje 17-19: Markupen til komponenten rendres.

Eksempel 2:

Vi lager Counter-komponenten for å holde styr på en counter-verdi. Oppgaven er å logge verdien til variabelen counter hver gang den endres. For å oppnå dette bruker vi 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 å utnytte funksjonaliteten;
• Linje 3: Konvensjonell funksjonssyntaks definerer "Counter"-komponenten;
• Linje 4: Vi initialiserer tilstanden ved hjelp av useState-hooken, som representerer startverdien til variabelen count. I dette eksempelet er det 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 variabelen count;
  • Linje 8: avhengighetslisten. Vi gir React beskjed om at når verdien til variabelen count endres, skal koden inne i funksjonen til useEffect kjøres.
• Linje 14-19: Markupen til komponenten rendres.

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 verifisere denne oppførselen ved å observere de tilsvarende loggene i konsollen.