useEffect, useLayoutEffect en useEffectEvent: Een vergelijking van Hooks voor het ophalen van gegevens in React

React hooks zijn een krachtige manier om neveneffecten in React-componenten te beheren. Drie van de meest voorkomende haken voor het afhandelen van neveneffecten zijn useEffect, useLayoutEffect en useEffectEvent. Elke hook heeft zijn eigen unieke use case, dus het kiezen van de juiste hook is essentieel.

De useEffect haak

de effect-rendering functie en de afhankelijkheidslijst.

De effect functie kapselt de code in die verantwoordelijk is voor het produceren van een neveneffect, terwijl de afhankelijkheidslijst dicteert wanneer deze functie moet worden uitgevoerd. In gevallen waarin de afhankelijkhedenmatrix geen inhoud bevat, wordt de effectfunctie alleen uitgevoerd tijdens de eerste rendering van het onderdeel. Als de afhankelijkheidsmatrix daarentegen wijzigingen bevat, wordt de effectfunctie bij elke wijziging opnieuw uitgevoerd.

Een uitstekende illustratie van het gebruik van de useEffect hook voor het ophalen van gegevens kan als volgt worden gevonden:

 import React from "react";

function App() {
  const [data, setData] = React.useState([]);

  React.useEffect(() => {
    fetch("<https://jsonplaceholder.typicode.com/posts>")
      .then((response) => response.json())
      .then((data) => setData(data));
  }, []);

  return (
    <div className="app">
      {data.map((item) => (
        <div key={item.id}>{item.title}</div>
      ))}
    </div>
  );
}

export default App;

Dit voorbeeld toont een functioneel React-component, aangeduid als het “App”-component, dat de “useEffect”-haak gebruikt om gegevens op te halen uit een externe API. De effect handler die is gekoppeld aan de “useEffect” hook haalt voorbeeldgegevens op uit de JSONPlaceholder API, verwerkt het JSON antwoord en werkt vervolgens de “data” status bij met de verkregen gegevens.

Rekening houdend met de huidige staat van de gegevens van onze applicatie, toont de app het titelattribuut geassocieerd met elk respectief item binnen die informatie.

Kenmerken van de useEffect Hook

De applicatie is ontworpen met asynchrone werking in gedachten en bevat deze functionaliteit van nature, wat resulteert in een naadloze ervaring bij het ophalen van gegevens.

Het gebruik van de useEffect hook is gepland om plaats te vinden na de voltooiing van het renderproces voor een bepaald onderdeel, waardoor wordt gegarandeerd dat deze hook de gebruikersinterface niet hindert of belemmert tijdens deze periode.

De richtlijn biedt een gestroomlijnde aanpak voor het uitvoeren van opruimtaken door middel van een functie die automatisch wordt aangeroepen na voltooiing van een listener of abonnement. Dergelijke functionaliteit kan met name nuttig zijn in situaties waar het efficiënt afsluiten en vrijgeven van bronnen van het grootste belang is, zoals in gevallen met luisteraars of abonnementen.

De useLayoutEffect haak

Het gebruik van de useLayoutEffect haak weerspiegelt de functionaliteit van de useEffect haak; het werkt echter synchroon na alle gevallen van DOM wijziging. Bijgevolg wordt deze functie uitgevoerd voordat de browser de visuele weergave op het scherm kan weergeven, waardoor het zeer voordelig is voor ondernemingen die veeleisende manipulatie van de Document Object Model (DOM) structuur en styling attributen vereisen, met inbegrip van maar niet beperkt tot het bepalen van de afmetingen van een bepaald element, het aanpassen van de afmetingen van een element, of het orkestreren van de ruimtelijke rangschikking van genoemd element door animatietechnieken.

Door gebruik te maken van de useLayoutEffect hook, kan men de afmetingen van een knopcomponent aanpassen zoals hieronder wordt gedemonstreerd:

 import React from "react";

function App() {
  const button = React.useRef();

  React.useLayoutEffect(() => {
    const { width } = button.current.getBoundingClientRect();

    button.current.style.width = `${width \\+ 12}px`;
  }, []);

  return (
    <div className="app">
      <button ref={button}>Click Me</button>
    </div>
  );
}

export default App;

Het bovenstaande codefragment breidt de afmetingen van de knopcomponent uit met twaalf eenheden door gebruik te maken van het functionele hulpprogramma useLayoutEffect . Deze configuratie garandeert dat de aangepaste breedte wordt toegepast op de knop voordat deze visueel wordt weergegeven op het weergaveapparaat van de gebruiker.

Kenmerken van de useLayoutEffect-haak

De synchrone uitvoering van JavaScript-code zorgt ervoor dat de bewerking op een sequentiële manier plaatsvindt zonder enige onderbreking van de gebruikersinterface. Deze aanpak kan echter leiden tot vertraging of blokkering van de UI vanwege de tijdrovende aard van bepaalde bewerkingen.

De DOM Read/Write bewerking is ideaal ontworpen voor onmiddellijke toegang tot het Document Object Model voor zowel lezen als schrijven van gegevens, met name wanneer snelheid in het waarnemen van wijzigingen voordat de browser opnieuw schildert een prioriteit is.

De useEffectEvent haak

Het gebruik van de useEffectEvent haak vormt een efficiënte oplossing voor de uitdagende afhankelijkheidsproblemen die inherent zijn aan de conventionele useEffect haak. Het lijkt erop dat degenen die goed bekend zijn met de werking van useEffect worstelen met de fijne kneepjes van de afhankelijkheidsarray, waardoor het soms nodig is om elementen toe te voegen die niet absoluut noodzakelijk zijn voor een goede werking.

Bijvoorbeeld:

 import React from "react";

function App() {
  const connect = (url) => {
    // logic for connecting to the url
  };

  const logConnection = (message, loginOptions) => {
    // logic for logging the connection details
  };

  const onConnected = (url, loginOptions) => {
    logConnection(`Connected to ${url}`, loginOptions);
  };

  React.useEffect(() => {
    const device = connect(url);
    device.onConnected(() => {
      onConnected(url);
    });

    return () => {
      device.disconnect();
    };
  }, [url, onConnected]);

  return <div></div>;
}

export default App;

De huidige code toont de functionaliteit van de

De useEffect hook functies door het aanroepen van de connect methode en het opzetten van een asynchrone “onConnected” callback functie die zal worden uitgevoerd zodra de “onConnected” gebeurtenis wordt geactiveerd door het apparaat. Vervolgens voert deze callback een logactie uit die een verbindingsbericht genereert. Verder biedt het een decommissioning-functie die in werking treedt bij het afkoppelen van de component en zo de verantwoordelijkheid op zich neemt voor het verbreken van de verbinding met het apparaat.

De DependencyArray bevat zowel de URL als een event handler bekend als “onConnected”. Telkens wanneer het App-onderdeel wordt weergegeven, genereert het dynamisch deze specifieke functie. Bijgevolg doorloopt de React hook, “useEffect”, een iteratief proces waarbij het primaire doel is om de status van de App component herhaaldelijk bij te werken.

Een van de effectieve methoden om het probleem van de useEffect lus aan te pakken is door gebruik te maken van de useEffectEvent hook, die een gestroomlijnde oplossing biedt zonder de afhankelijkheidsarray te belasten met extra onnodige waarden.

 import React from "react";

function App() {
  const connect = (url) => {
    // logic for connecting to the URL
  };

  const logConnection = (message, loginOptions) => {
    // logic for logging the connection details
  };

  const onConnected = React.useEffectEvent((url, loginOptions) => {
    logConnection(`Connected to ${url}`, loginOptions);
  });

  React.useEffect(() => {
    const device = connect(url);
    device.onConnected(() => {
      onConnected(url);
    });

    return () => {
      device.disconnect();
    };
  }, [url]);

  return <div></div>;
}
export default App;

Door gebruik te maken van de useEffectEvent hook om de onConnected functie in te pakken, zorgen we ervoor dat de message en loginOptions parameters altijd up-to-date zijn wanneer ze worden doorgegeven aan de useEffect hook. Bijgevolg is de laatste niet langer afhankelijk van de eerste of enige parameters die eraan worden doorgegeven.

Wanneer u de useEffect hook gebruikt, kan het voordelig zijn om te vertrouwen op een bepaalde waarde voor het triggeren van het effect, ondanks het feit dat het effect extra waarden vereist die misschien niet wenselijk zijn als afhankelijkheden binnen de useEffect .

Kenmerken van de useEffectEvent haak

Het systeem blinkt uit in het afhandelen van event getriggerde gevolgen.

Het gebruik van de haak useEffect is niet compatibel met functies voor het afhandelen van gebeurtenissen zoals onClick , onChange , enzovoort, omdat deze gebeurtenissen worden geactiveerd door gebruikersinteracties in plaats van reactieve afhankelijkheden die kunnen worden gecontroleerd op veranderingen door React.

De useEffect hook, een krachtig en veelzijdig hulpmiddel voor het beheren van neveneffecten in functionele componenten, blijft een experimentele functie vanaf React-versies tot en met 18. De beschikbaarheid ervan kan nog veranderen. Opgemerkt moet worden dat de beschikbaarheid kan variëren tussen verschillende releases of builds van React.

Wanneer welke hook gebruiken?

Elk van deze haken voor het ophalen van gegevens heeft zijn eigen unieke toepasbaarheid, afhankelijk van specifieke omstandigheden.

Het gebruik van de useEffect hook in React biedt een geschikte oplossing voor het ophalen en bijwerken van gegevens binnen een component, omdat het efficiënt beheer van asynchrone bewerkingen mogelijk maakt met behoud van een schone en georganiseerde codebase.

Wanneer directe wijzigingen aan het Document Object Model (DOM) nodig zijn op een manier die onmiddellijke rendering van de wijzigingen vereist, is het raadzaam om useLayoutEffect te gebruiken. Deze functie zorgt voor een efficiënte afhandeling van dergelijke taken door ervoor te zorgen dat de gespecificeerde acties worden uitgevoerd na de eerste render en voordat eventuele latere updates of reflows plaatsvinden.

Het gebruik van de useEffect haak voor lichtgewicht operaties vormt geen bedreiging voor het belemmeren van de gebruikersinterface, waardoor ze gemakkelijk en gemakkelijk kunnen worden uitgevoerd.

Het gebruik van event-gedreven neveneffecten kan bereikt worden door zowel de useEffectEvent haak te gebruiken voor het vastleggen en afhandelen van events, als de useEffect haak voor het uitvoeren van de nodige neveneffecten in reactie op die events.

Efficiënt omgaan met neveneffecten

Het gebruik van React-hooks onthult een uitgebreid scala aan mogelijkheden en het begrijpen van het verschil tussen de useEffect-, useLayoutEffect- en useEffectEvent-hooks kan de manier waarop je neveneffecten en DOM-manipulatie beheert aanzienlijk beïnvloeden. Het is noodzakelijk om de specifieke vereisten en vertakkingen van deze haken te overwegen om gebruikersgerichte softwareprogramma’s te bouwen.