Hantering av Sidouppgifter med useEffect

useEffect-hooken möjliggör synkronisering av komponenten med externa faktorer/tjänster, inklusive hämtning av data, prenumerationer, manuella ändringar, etc.

Syntax:

Det första argumentet (setup) är en pilarfunktion som kommer att köras efter varje rendering. Det andra argumentet (dependencies) är en valfri array av beroenden. Om dependencies anges kommer effekten endast att köras om något av beroendena har ändrats sedan senaste rendering. Om beroende-arrayen utelämnas körs effekten efter varje rendering.

useEffect(setup, dependencies)

Eftersom vi vet att setup måste vara en pilarfunktion och dependencies måste vara en array, får vi följande struktur för useEffect-hooken.

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

Exempel 1:

Skapa komponenten Articles, som använder hooken useEffect för att tilldela data till tillståndet articles. Detta är ett utmärkt tillfälle att utforska den kraftfulla kombinationen 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 denna komponent använder vi hooken useEffect för att säkerställa att tillståndet articles fylls med data. Som nämnts tidigare körs funktionen useEffect efter varje rendering, vilket garanterar att data visas för användaren om den hämtas. Detta säkerställer en smidig användarupplevelse med uppdaterat innehåll.

Rad-för-rad-förklaring:

• Rad 1: Vi importerar hookarna useEffect och useState från React-biblioteket för att utnyttja dess funktionalitet;
• Rad 2: Vi importerar funktionen fetchData från "../service/api". Denna funktion ansvarar för att göra en API-förfrågan och hämta data;
• Rad 4: Articles-komponenten definieras med konventionell funktionssyntax;
• Rad 5: Vi initierar tillståndet med hooken useState, vilket representerar det initiala värdet för variabeln articles. I detta exempel är det en tom array;
• Raderna 7-15: Det faktiska användningsfallet för hooken useEffect;
  • Rad 7 och rad 15: är syntaxen. Det är så vi kommer att använda den;
  • Rad 8: funktionen fetchData anropas. Denna funktion förväntas göra en API-förfrågan och returnera ett löfte (promise);
  • Raderna 9-11: När löftet uppfylls (then-blocket), tas emot ett resp-objekt. Datan extraheras från resp med hjälp av resp.jokes, vilket sätts in i tillståndet articles med setArticles;
  • Raderna 12-14: Om det uppstår ett fel under API-förfrågan (i catch-blocket), loggas det till konsolen med console.error.
• Raderna 17-19: Komponentens markup renderas.

Komplett appkod:

Exempel 2:

Vi skapar komponenten Counter för att spåra ett counter-värde. Uppgiften är att logga värdet av variabeln counter varje gång det ändras. För att uppnå detta kommer vi att använda hooken useEffect med en beroende-array som består av variabeln 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>
  );
};

Rad-för-rad-förklaring:

• Rad 1: Vi importerar hookarna useEffect och useState från React-biblioteket för att använda dess funktionalitet;
• Rad 3: Den konventionella funktionssyntaxen definierar komponenten "Counter";
• Rad 4: Vi initierar tillståndet med hjälp av hooken useState, vilket representerar det initiala värdet för variabeln count. I detta exempel är det 0;
• Raderna 6-8: Det faktiska användningsfallet för hooken useEffect;
  • Rad 7: denna logik kommer att ske varje gång värdet i beroende-arrayen ändras. I detta fall är det variabeln count;
  • Rad 8: beroende-array. Vi informerar React om att när värdet på variabeln count ändras, ska koden inuti funktionen för hooken useEffect köras.
• Raderna 14-19: Komponentens markup renderas.

Komplett appkod:

Ta gärna en stund och inspektera konsolen för att observera exekveringslogiken för pilfunktionen inuti hooken useEffect. Pilfunktionen körs först vid initial rendering och anropas sedan igen varje gång värdet på variabeln counter ändras. Du kan verifiera detta beteende genom att observera motsvarande loggar i konsolen.