useLayoutEffect contre useEffect dans React

Les hooks useLayoutEffect et useEffect dans React partagent des similitudes en termes de fonction mais diffèrent en ce qui concerne le timing d’exécution. Dans cet article, nous examinerons cette différence principale, en vous donnant un aperçu du moment et de la raison pour laquelle utiliser chaque hook efficacement.

Dans des articles précédents, nous avons expliqué comment utiliserEffet, utiliserContext et utiliserRéducteur les hooks améliorent les capacités des composants fonctionnels dans React. En particulier, nous sommes venus voir comment le useEffect hook nous permet d’effectuer des effets secondaires dans les composants de fonction, offrant une solution élégante pour gérer des tâches telles que les appels API, la récupération de données et les abonnements.

Il existe un autre hook principal de React qui ressemble beaucoup à useEffect dans le comportement et dans le nom : le useLayoutEffect crochet. Dans cet article, nous explorerons les subtilités du useLayoutEffect crochet, en examinant ses applications spécifiques et en quoi il diffère du useEffect crochet.

crochet useLayoutEffect

Le useLayoutEffect crochet, tout comme le useEffect hook, peut être utilisé pour effectuer des effets secondaires dans les composants fonctionnels. useLayoutEffect ne renvoie aucune valeur mais prend à la place deux arguments. Le premier étant obligatoire et le second facultatif.

• Le premier argument est la fonction de rappel d’effet que nous voulons que le hook exécute (c’est-à-dire l’effet lui-même).
• Le deuxième argument (facultatif) est un tableau de dépendances qui contient des dépendances qui, une fois modifiées, déclenchent l’effet sur rediffusion.

Dans du code, useLayoutEffect serait utilisé comme suit :

import React, { useLayoutEffect } from "react";

export const FunctionComponent = () => {
  useLayoutEffect(() => {
    
  }, [] );

  return (
    
  );
};

Tout comme le useEffect hook, il y a trois étapes dans le cycle de vie d’un composant React où nous pouvons souhaiter exécuter un effet secondaire :

• À chaque rendu
• Uniquement lors du rendu initial
• Lors du rendu initial et à chaque fois qu’une certaine dépendance change

Pour connaître les différentes étapes du cycle de vie auxquelles un effet peut être exécuté au sein d’un composant, reportez-vous à l’article précédent intitulé Une ventilation du hook React useEffect.

D’un premier coup d’œil, le useLayoutEffect le crochet semble identique au useEffect hook, alors qu’est-ce qui pourrait inciter un développeur à choisir l’un plutôt que l’autre dans une application React ?

Calendrier d’exécution

La principale différence entre useEffect et useLayoutEffect est quand le rappel est exécuté. Avec useEffectle rappel est exécuté de manière asynchrone après le rendu du composant et la mise à jour de l’écran. useLayoutEffect, en revanche, se déclenche de manière synchrone après toutes les mutations du DOM mais avant que le navigateur n’ait peint les modifications. Pour mieux comprendre cela, nous allons passer par un exemple simple.

Supposons que nous voulions enregistrer deux messages différents sur la console pour observer l’ordre d’exécution. Le premier message, « useEffect : DOM mis à jour », serait placé dans la fonction de rappel du useEffect hook, tandis que l’autre message, « Rendering Component », serait placé directement dans le corps du composant fonction, en dehors du useEffect crochet.

import React, { useEffect } from "react";

function ExampleComponent() {
  useEffect(() => {
    console.log("useEffect: DOM updated");
  });

  console.log("Rendering Component");

  return <div>Hello World</div>;
}

Si nous devions tester ce comportement dans le navigateur, nous remarquerions :

1. Le message de la console « Rendering Component » est enregistré en premier pendant la phase de rendu du composant.
2. Le navigateur peint l’écran en plaçant le message « Hello World » sur l’écran.
3. Une fois le rendu du composant terminé et l’écran peint, l’effet est exécuté et le message « useEffect : DOM mis à jour » est enregistré sur la console.

Nous pourrions utiliser la même configuration que ci-dessus, mais exploiter à la place le useLayoutEffect Crochet:

import React, { useLayoutEffect } from "react";

function ExampleComponent() {
  useLayoutEffect(() => {
    console.log("useLayoutEffect: Before paint");
  });

  console.log("Rendering Component");

  return <div>Hello World</div>;
}

Si nous devions exécuter l’exemple de code ci-dessus, nous remarquerions une petite différence dans la séquence des événements :

1. Le message de la console « Composant de rendu » est toujours enregistré en premier. Cela se produit lors de la phase de rendu du composant, tout comme dans l’exemple précédent avec useEffect.
2. Alors, avant le navigateur a la possibilité d’afficher le message « Hello World » sur l’écran (c’est-à-dire que l’écran est toujours vide), le useLayoutEffect des feux de crochet. Cela entraîne la journalisation du message « useLayoutEffect: Before paint » sur la console.
3. Enfin, une fois ces messages de console enregistrés, le navigateur peint l’écran et affiche le message « Hello World ».

La différence de timing d’exécution entre useEffect et useLayoutEffect est subtil mais crucial pour certains types d’opérations dans une application React. Le processus de rendu et de peinture est rapide, ce qui rend souvent difficile l’observation de la différence à l’œil nu. Cependant, la clé réside dans la compréhension de la nature synchrone et asynchrone de ces hooks.

useLayoutEffect est utile lorsque nous devons apporter des modifications au DOM et que nous voulons nous assurer que le les modifications sont visibles par l’utilisateur immédiatement avant qu’il ne voie autre chose. Ceci est utile dans :

• Prévenir le scintillement. En utilisant useLayoutEffect vous permet d’apporter des modifications au DOM avant la mise à jour de l’écran. Cela peut empêcher le scintillement ou d’autres artefacts visuels indésirables lorsque l’utilisateur voit des mises à jour se produire à l’écran.
• Assurer des mesures précises. Lorsque nous devons mesurer le DOM (comme obtenir la largeur d’un élément), useLayoutEffect garantit que nous mesurons le DOM après sa mise à jour mais avant que l’utilisateur ne voie les modifications. Cela garantit la précision sans provoquer de nouveau rendu.

useEffect est conçu pour les effets les plus courants, tels que la récupération de données, la configuration d’abonnements et la modification manuelle du DOM lorsque React n’a pas besoin d’être conscient des modifications. Par conséquent, useEffect doit être utilisé lorsque le L’effet n’a pas d’impact sur la mise en page ou les visuels avant la prochaine peinture. Depuis useEffect est asynchrone et n’empêche pas le navigateur de peindre, cela peut conduire à de meilleures performances car il permet au navigateur de prioriser les mises à jour de l’écran.

Conclure

En conclusion, la distinction entre useEffect et useLayoutEffect dans React dépend de leur timing d’exécution. Lorsque vous décidez quel crochet utiliser, optez toujours pour le useEffect hook si l’effet ne nécessite pas de synchronisation immédiate avec le DOM, comme pour les appels API ou la récupération de données. Cela devrait suffire pour la plupart des scénarios impliquant l’exécution d’effets.

useLayoutEffect Il est préférable de le réserver aux opérations plus complexes qui nécessitent une interaction avec le DOM ou un timing spécifique, telles que les mesures du DOM ou la prévention des scintillement visuels.

Pour plus de lectures supplémentaires, assurez-vous de consulter le documentation officielle de React sur le hook useLayoutEffect.