Omgaan met Neveneffecten met useEffect

De useEffect-hook maakt het mogelijk om het component te synchroniseren met externe factoren/diensten, waaronder het ophalen van data, abonnementen, handmatige wijzigingen, enzovoort.

Syntaxis:

Het eerste argument (setup) is een pijlfunctie die wordt uitgevoerd na elke render. 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 is gewijzigd sinds de laatste render. Als de dependencies-array wordt weggelaten, wordt het effect na elke render uitgevoerd.

useEffect(setup, dependencies)

Omdat we weten dat setup een pijlfunctie moet zijn en dependencies een array moet zijn, krijgen we het volgende voorbeeld van de useEffect-hook.

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

Voorbeeld 1:

Hier maken we de Articles-component, die de useEffect-hook gebruikt om data toe te wijzen aan de articles-toestand. 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 gebruiken we de useEffect-hook om ervoor te zorgen dat de articles-toestand wordt gevuld met data. Zoals eerder vermeld, wordt de useEffect-functie uitgevoerd na elke render, waardoor gegarandeerd wordt dat data aan de gebruiker wordt getoond als deze beschikbaar is. Dit zorgt voor een soepele gebruikerservaring met actuele inhoud.

Regel-voor-regel uitleg:

• Regel 1: We importeren de useEffect- en useState-hooks 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-verzoek en het ophalen van gegevens;
• Regel 4: De Articles-component wordt gedefinieerd met de conventionele functiesyntaxis;
• Regel 5: We initialiseren de state 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 verwacht een API-verzoek uit te voeren en een promise terug te geven;
  • Regels 9-11: Wanneer de promise wordt opgelost (then-blok), ontvangt het een resp-object. De data wordt uit resp gehaald via resp.jokes, en wordt met setArticles in de state articles gezet;
  • Regels 12-14: Als er een fout optreedt tijdens het API-verzoek (in het catch-blok), wordt deze gelogd naar de console met console.error.
• Regels 17-19: De markup van de component wordt gerenderd.

Voorbeeld 2:

We maken de Counter-component om een counter-waarde bij te houden. De taak 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>
  );
};

Regel-voor-regel uitleg:

• Regel 1: We importeren de useEffect- en useState-hooks uit de React-bibliotheek om hun functionaliteit te benutten;
• Regel 3: De conventionele functiesyntaxis definieert de "Counter"-component;
• Regel 4: We initialiseren de state met de useState-hook, wat 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 laten React weten 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.

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. Je kunt dit gedrag verifiëren door de bijbehorende logs in de console te bekijken.