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 arrow function die na elke render wordt uitgevoerd. Het tweede argument (dependencies) is een optionele array van afhankelijkheden. Als de dependencies worden opgegeven, wordt het effect alleen opnieuw uitgevoerd als een van de afhankelijkheden sinds de laatste 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 arrow function moet zijn en dependencies een array moet 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>])

Voorbeeld 1:

Maak de Articles-component, die de useEffect-hook gebruikt om data toe te wijzen aan de articles-toestand. 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-toestand 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 indien beschikbaar. Dit zorgt voor een soepele gebruikerservaring met actuele inhoud.

Regel-voor-regel uitleg:

• Regel 1: Importeren van de useEffect en useState hooks uit de React-bibliotheek om de functionaliteit te benutten;
• Regel 2: Importeren van de fetchData functie uit "../service/api". Deze functie is verantwoordelijk voor het uitvoeren van een API-aanvraag en het ophalen van gegevens;
• Regel 4: Het Articles component wordt gedefinieerd met behulp van de conventionele functie-syntaxis;
• Regel 5: Initialiseren van de state met de useState hook, wat de beginwaarde van de articles variabele voorstelt. In dit voorbeeld is het 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 fetchData functie wordt aangeroepen. Deze functie wordt verwacht 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 data wordt uit resp gehaald via resp.jokes, en wordt ingesteld in de articles state met setArticles;
  • 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 het component wordt gerenderd.

Volledige app-code:

Voorbeeld 2:

Maak het Counter component om een counter waarde bij te houden. De taak is om de waarde van de counter variabele te loggen telkens wanneer deze verandert. Hiervoor gebruiken we de useEffect hook met een afhankelijkheidsarray bestaande uit de counter variabele.

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 state met behulp van de useState hook, waarmee de beginwaarde van de count-variabele 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 count-variabele;
  • Regel 8: afhankelijkheidsarray. Hiermee wordt aan React aangegeven dat wanneer de waarde van de count-variabele 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 arrow-functie binnen de useEffect hook. De arrow-functie wordt eerst uitgevoerd bij de initiële render en vervolgens opnieuw aangeroepen telkens wanneer de waarde van de counter-variabele verandert. Dit gedrag is te verifiëren door de bijbehorende logs in de console te bekijken.