De useEffect-hook maakt het mogelijk om het component te synchroniseren met externe factoren of services, zoals het ophalen van data, abonnementen, handmatige wijzigingen, enzovoort.

Syntax:

Het eerste argument (setup) is een arrow function die na elke render wordt uitgevoerd. Het tweede argument (dependencies) is een optionele array van afhankelijkheden. Als de dependencies zijn opgegeven, wordt het effect alleen opnieuw uitgevoerd als een van de afhankelijkheden sinds de vorige render is gewijzigd. Als de array met afhankelijkheden wordt weggelaten, wordt het effect na elke render uitgevoerd.

useEffect(setup, dependencies)

Aangezien we weten dat de setup een arrow-functie moet zijn en de dependencies een array moeten zijn, krijgen we het volgende record van de useEffect-hook.

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

Opmerking

React-componenten zijn vaak afhankelijk van de combinatie van useEffect- en useState-hooks. Deze hooks werken samen om de status en neveneffecten binnen componenten te beheren.

Voorbeeld 1:

Laten we de Articles-component maken, die de useEffect-hook zal gebruiken om data toe te wijzen aan de articles-status. Dit is een uitstekende gelegenheid om de krachtige combinatie van React-hooks te verkennen.

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
  );
};

Binnen deze component maken we gebruik van de useEffect-hook om ervoor te zorgen dat de articles-status wordt gevuld met gegevens. Zoals eerder vermeld, wordt de useEffect-functie na elke render uitgevoerd, waardoor wordt gegarandeerd dat gegevens aan de gebruiker worden getoond zodra deze beschikbaar zijn. Dit zorgt voor een naadloze gebruikerservaring met actuele inhoud.

Regel-voor-regel uitleg:

• Regel 1: We importeren de hooks useEffect en useState uit de React-bibliotheek om hun functionaliteit te benutten;
• Regel 2: We importeren de functie fetchData uit "../service/api". Deze functie is verantwoordelijk voor het uitvoeren van een API-aanvraag en het ophalen van gegevens;
• Regel 4: De Articles-component wordt gedefinieerd met behulp van de conventionele functiesyntaxis;
• Regel 5: We initialiseren de status met de useState-hook, wat de beginwaarde van de variabele articles voorstelt. In dit voorbeeld is dat een lege array;
• Regels 7-15: Het daadwerkelijke gebruik van de useEffect-hook;
  • Regel 7 en regel 15: is de syntaxis. Dit is hoe we het zullen gebruiken;
  • Regel 8: de functie fetchData wordt aangeroepen. Deze functie wordt verondersteld een API-aanvraag te doen en een promise terug te geven;
  • Regels 9-11: Wanneer de promise wordt opgelost (then-blok), ontvangt het een resp-object. De gegevens worden uit resp gehaald via resp.jokes, en worden met setArticles in de articles-status gezet;
  • Regels 12-14: Als er een fout optreedt tijdens de API-aanvraag (in het catch-blok), wordt deze gelogd naar de console met console.error.
• Regels 17-19: De markup van de component wordt gerenderd.

Volledige app-code:

Voorbeeld 2:

We maken de Counter-component om een counter-waarde bij te houden. De opdracht is om de waarde van de variabele counter te loggen telkens wanneer deze verandert. Hiervoor gebruiken we de useEffect-hook met een afhankelijkheidsarray die de variabele counter bevat.

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>
  );
};

Uitleg per regel:

• Regel 1: We importeren de hooks useEffect en useState uit de React-bibliotheek om hun functionaliteit te gebruiken;
• Regel 3: De conventionele functiesyntax definieert de "Counter"-component;
• Regel 4: We initialiseren de state met de useState-hook, die de beginwaarde van de variabele count voorstelt. In dit voorbeeld is dat 0;
• Regels 6-8: Het daadwerkelijke gebruik van de useEffect-hook;
  • Regel 7: deze logica wordt uitgevoerd telkens wanneer de waarde in de afhankelijkheidsarray verandert. In dit geval is dat de variabele count;
  • Regel 8: afhankelijkheidsarray. We geven aan React door dat wanneer de waarde van de variabele count verandert, de code binnen de functie van de useEffect-hook moet worden uitgevoerd.
• Regels 14-19: De markup van de component wordt gerenderd.

Volledige app-code:

Neem even de tijd om de console te inspecteren en observeer de uitvoeringslogica van de pijlfunctie binnen de useEffect-hook. De pijlfunctie wordt eerst uitgevoerd bij de initiële render en vervolgens opnieuw aangeroepen telkens wanneer de waarde van de variabele counter verandert. U kunt dit gedrag verifiëren door de bijbehorende logs in de console te bekijken.