useEffect, useLayoutEffect et useEffectEvent : Une comparaison des hooks de récupération de données dans React

Les hooks de React sont un moyen puissant de gérer les effets de bord dans les composants React. Trois des crochets les plus courants pour gérer les effets secondaires sont useEffect, useLayoutEffect et useEffectEvent. Chaque hook a son propre cas d’utilisation, il est donc essentiel de choisir le bon pour le travail.

Le crochet useEffect

Le crochet useEffect useEffect est un crochet fondamental dans React qui vous permet d’effectuer des effets de bord tels que la manipulation du DOM, les opérations asynchrones et la récupération de données dans les composants fonctionnels. Ce hook est une fonction qui prend deux arguments, la fonction effect et le tableau de dépendance.

La fonction d’effet contient le code qui exécute l’effet secondaire, et le tableau de dépendance détermine quand la fonction d’effet s’exécute. Si le tableau de dépendances est vide, la fonction d’effet ne s’exécute qu’une seule fois lors du rendu initial du composant. Sinon, la fonction d’effet s’exécute chaque fois que l’une des valeurs du tableau de dépendance change.

Voici un exemple d’utilisation du hook useEffect pour récupérer des données :

Ce code démontre une fonction App qui récupère des données d’une API externe à l’aide du crochet useEffect. La fonction de l’effet useEffect récupère un échantillon de données de l’API JSONPlaceholder. Elle analyse ensuite la réponse JSON et définit les données récupérées dans le champ données état.

Avec l’état des données, le composant App effectue le rendu de l’état titre de chaque élément de l’état.

Caractéristiques du crochet useEffect

  • Asynchrone et convivial: Il prend en charge les opérations asynchrones de manière native, ce qui le rend pratique pour la collecte de données.
  • S’exécute après le rendu: Le crochet useEffect exécute ses effets après le rendu du composant par l’application, ce qui garantit que le crochet ne bloque pas l’interface utilisateur.
  • Nettoyage: Il fournit un moyen intégré d’effectuer un nettoyage en retournant une fonction. Cela peut être particulièrement utile lorsque l’on travaille avec des auditeurs ou des abonnements.
Voir aussi :  Ajouter un ADC à votre Raspberry Pi : Ce qu'il faut savoir

Le crochet useLayoutEffect

Le crochet useLayoutEffect useLayoutEffect est similaire au crochet useEffect mais il s’exécute de manière synchrone après toutes les mutations du DOM. Cela signifie qu’il s’exécute avant que le navigateur ne puisse peindre l’écran, ce qui le rend adapté aux tâches qui nécessitent un contrôle précis de la disposition et des styles du DOM, comme la mesure de la taille d’un élément, le redimensionnement d’un élément ou l’animation de sa position.

Voici un exemple d’utilisation du hook useLayoutEffect pour modifier la largeur d’un élément bouton élément :

Le bloc de code ci-dessus augmente la largeur de l’élément button de 12 pixels à l’aide du crochet useLayoutEffect. Cela garantit que la largeur du bouton augmente avant qu’il ne s’affiche à l’écran.

Caractéristiques du crochet useLayoutEffect

  • Synchrone: Il s’exécute de manière synchrone, bloquant potentiellement l’interface utilisateur si l’opération qu’il contient est lourde.
  • DOM lecture/écriture: Il est le mieux adapté pour lire et écrire directement dans le DOM, en particulier si vous avez besoin des changements avant que le navigateur ne se repeigne.

Le crochet useEffectEvent

Le crochet useEffectEvent useEffectEvent est un hook React qui résout les problèmes de dépendances du hook useEffect hook. Si vous êtes familier avec useEffect, vous savez que son tableau de dépendances peut être délicat. Parfois, vous devez mettre plus de valeurs dans le tableau de dépendance que ce qui est strictement nécessaire.

Voir aussi :  Comment charger les images paresseusement en utilisant HTML et JavaScript

Par exemple :

Ce code démontre que le tableau de dépendances L’application qui gère une connexion à un service externe. Le composant connect permet de se connecter à une URL spécifiée, tandis que la fonction logConnection enregistre les détails de la connexion. Enfin, la fonction onConnected appelle la fonction logConnection pour enregistrer un message de connexion réussie lorsque l’appareil se connecte.

Le hook useEffect appelle la fonction de connexion, puis met en place une fonction de rappel onConnected à exécuter lorsque la fonction périphérique déclenche l’événement onConnected. Cette fonction de rappel enregistre un message de connexion. Elle renvoie une fonction de nettoyage qui s’active lorsque le composant se démonte. Cette fonction de nettoyage est responsable de la déconnexion du périphérique.

Le tableau des dépendances comporte les éléments suivants url et la variable onConnected . Le composant App créera la fonction onConnected à chaque rendu. Cela entraînera l’exécution en boucle de la fonction useEffect, qui poursuivra le nouveau rendu du composant App.

Il existe plusieurs façons de résoudre le problème de la boucle useEffect. Cependant, la façon la plus efficace de le faire sans ajouter des valeurs inutiles à votre tableau de dépendances est d’utiliser le hook useEffectEvent.

En enveloppant la fonction onConnected avec le hook useEffectEvent, le hook useEffectEvent peut toujours lire les dernières valeurs de l’élément message et loginOptions avant de les transmettre au crochet useEffect. Cela signifie que l’effet d’utilisation n’a pas besoin de s’appuyer sur la fonction onConnected ou sur les valeurs qui lui sont transmises.

Le crochet useEffectEvent est utile lorsque vous souhaitez que votre useEffect dépende d’une valeur spécifique, même si l’effet déclenche un événement qui nécessite d’autres valeurs que vous préférez ne pas utiliser comme dépendances dans le useEffect.

Voir aussi :  Comment créer votre première application Windows Forms (Winforms) dans Visual Studio

Caractéristiques du crochet useEffectEvent

  • Il est mieux adapté aux effets secondaires pilotés par des événements.
  • Le crochet useEffectEvent useEffectEvent ne fonctionne pas avec les gestionnaires d’événements tels que onClick, onChange, etc.

Le hook useEffectEvent est encore expérimental et indisponible dans les hooks de la version 18 de React.

Quand utiliser quel hook ?

Chacun des crochets de récupération de données ci-dessus est adapté à différentes situations :

  • Récupération de données: L’effet d’utilisation est un excellent choix.
  • Manipulations directes du DOM: Si vous devez apporter des modifications synchrones au DOM avant un repeint, optez pour useLayoutEffect.
  • Opérations légères: Pour les opérations qui ne risquent pas de bloquer l’interface utilisateur, vous pouvez librement utiliser useEffect.
  • Effets secondaires liés à un événement: Utilisez le crochet useEffectEvent pour envelopper les événements et le crochet useEffect pour exécuter les effets secondaires.

Gérer efficacement les effets de bord

Les hooks React ouvrent un monde de possibilités, et comprendre la différence entre les hooks useEffect, useLayoutEffect et useEffectEvent peut avoir un impact significatif sur la façon dont vous gérez les effets de bord et la manipulation du DOM. Il est essentiel de prendre en compte les exigences et les implications spécifiques de ces hooks pour créer des applications conviviales.

Améliorez votre QI technologique grâce à nos lettres d’information gratuites

En vous abonnant, vous acceptez notre politique de confidentialité et pouvez recevoir des communications occasionnelles ; vous pouvez vous désabonner à tout moment.

Cliquez pour évaluer cet article !
[Total: Moyenne : ]

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *