Omgaan Met Neveneffecten Met UseEffect

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

Syntaxis:

Het eerste argument (setup) is een pijlfunctie 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 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 wordt de Articles-component aangemaakt, die de useEffect-hook gebruikt om data toe te wijzen aan de articles-status. Dit biedt 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 data. Zoals eerder vermeld, wordt de useEffect-functie uitgevoerd na elke render, waardoor wordt gegarandeerd dat data aan de gebruiker wordt getoond zodra deze beschikbaar is. Dit zorgt voor een soepele gebruikerservaring met actuele inhoud.

Regel-voor-regel uitleg:

• Regel 1: De useEffect- en useState-hooks worden geïmporteerd uit de React-bibliotheek om hun functionaliteit te benutten;
• Regel 2: De functie fetchData wordt geïmporteerd 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 behulp van de conventionele functiesyntaxis;
• Regel 5: De status wordt geïnitialiseerd 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 het gebruikt wordt;
  • Regel 8: de functie fetchData wordt aangeroepen. Deze functie wordt verondersteld 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 gegevens worden uit resp gehaald via resp.jokes, en vervolgens ingesteld in de status articles met setArticles;
  • 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.

Volledige app-code:

Voorbeeld 2:

De Counter-component wordt aangemaakt om een counter-waarde bij te houden. De opdracht is om de waarde van de variabele counter te loggen telkens wanneer deze verandert. Hiervoor wordt de useEffect-hook gebruikt 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: Importeren van de useEffect- en useState-hooks uit de React-bibliotheek om de functionaliteit te benutten;
• Regel 3: De conventionele functiesyntaxis definieert de "Counter"-component;
• Regel 4: Initialiseren van de status met behulp van de useState-hook, waarmee de beginwaarde van de variabele count wordt weergegeven. 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. Hiermee wordt aan React aangegeven 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. Dit gedrag kan worden geverifieerd door de bijbehorende logs in de console te observeren.