Hantering av Sidouppgifter med useEffect

Hooken useEffect gör det möjligt att synkronisera 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 igen om något av beroendena har ändrats sedan senaste renderingen. 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 hooken useEffect.

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 ger 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 använda 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 den konventionella funktionssyntaxen;
• Rad 5: Vi initierar tillståndet med hooken useState, vilket representerar startvä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 löses (then-blocket), tas ett resp-objekt emot. Datan extraheras från resp med resp.jokes, som 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.

Exempel 2:

Vi skapar komponenten Counter för att hålla reda på ett counter-värde. Uppgiften är att logga värdet av variabeln counter varje gång det ändras. För att uppnå detta använder vi 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 hooken useState, vilket representerar startvä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 låter React veta 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.

Ta en stund och inspektera konsolen för att observera exekveringslogiken för pilfunktionen inuti useEffect-hooken. Pilfunktionen körs först vid den initiala renderingen 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.