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 kommer effekten att köras efter varje rendering.

useEffect(setup, dependencies)

Eftersom vi vet att setup måste vara en pilfunktion 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>])

Obs

React-komponenter förlitar sig ofta på kombinationen av useEffect och useState hooks. Dessa hooks samarbetar för att hantera tillstånd och bieffekter inom komponenter.

Exempel 1:

Vi skapar komponenten Articles, som kommer att använda useEffect-hooken 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
  );
};

Inuti denna komponent använder vi useEffect-hooken 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 har hämtats. 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 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: Komponenten Articles definieras med konventionell funktionssyntax;
• 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 emot ett resp-objekt. 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.

Komplett appkod:

Exempel 2:

Skapa 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 använder vi hooken useEffect med en beroende-array som innehåller 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 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 körs 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.

Fullständig appkod:

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.