useLayoutEffect est un crochet puissant

Bien que useEffect soit suffisant pour la plupart de nos besoins, nous devrions connaître le crochet useLayoutEffect – fonctionnant de manière synchrone, il peut être utilisé pour des choses telles que des animations, des mesures, des mutations, etc.

Les composants fonctionnels ont pris le contrôle de la communauté React. La sortie de React Hooks a rendu les composants fonctionnels beaucoup plus puissants et réutilisables. Les crochets permettaient aux composants fonctionnels de gérer et de déclarer l’état, de réutiliser la logique d’état et de réduire le code.

Il existe de nombreux crochets intégrés différents disponibles dans React et chacun d’eux a été créé dans un but spécifique.

Nous avons le useState crochet, fait pour la déclaration et la gestion de l’état. Nous avons le useReducer crochet qui permet aux composants fonctionnels de React d’accéder aux fonctions du réducteur. Et le useLayoutEffect est un crochet puissant, mais il n’attire pas autant l’attention que les autres crochets, peut-être pour une bonne raison.

Nous allons explorer comment fonctionne le crochet useLayoutEffect et quels sont les cas d’utilisation spécifiques les plus appropriés pour implémenter ce crochet. Mais d’abord, regardons une partie de l’arrière-plan.

Méthodes de cycle de vie

Avant la sortie de React Hooks, les composants de classe étaient essentiels pour les applications React. Ils étaient la norme pour la création de composants React et de méthodes de cycle de vie.

Chaque composant React a différentes étapes de cycle de rendu, telles que le montage, la mise à jour et le démontage. Pour les composants de classe, nous pourrions utiliser certaines fonctions qui seraient exécutées dans certains cycles de rendu spécifiques de notre composant.

Nous avons la méthode de cycle de vie componentDidMount qui s’exécute lorsque le composant est créé et inséré dans le DOM.

componentDidMount() {
  console.log("Rendered!");
}

Nous avons la méthode de cycle de vie componentDidUpdate qui s’exécute après une mise à jour dans notre composant.

componentDidUpdate(prevProps) {
  if (this.props.user !== prevProps.user) {
    console.log("Updated");
  }
}

Et nous avons la méthode de cycle de vie componentWillUnmount qui s’exécute lorsque nous voulons supprimer notre composant du DOM, également appelée démontage.

componentWillUnmount() {
  console.log("Component unmounted!");
}

Le crochet useEffect

Le utiliserEffet hook est une combinaison puissante de ces méthodes de cycle de vie, les remplaçant toutes par un seul crochet dans notre composant. Cela rend nos composants plus réutilisables, plus propres, plus fiables et plus faciles à tester.

Le crochet useEffect permet aux composants fonctionnels de React d’effectuer des effets secondaires. Il reçoit une fonction de rappel et un tableau de dépendances comme arguments.

useEffect(() => {
   
}, [dependencies]);

Le crochet useEffect peut être utilisé de différentes manières. Nous pouvons l’appeler à chaque fois que notre composant est rendu, nous ne pouvons l’appeler qu’une seule fois ou nous pouvons l’appeler lorsque seule une valeur change.

Nous pouvons exécuter le hook useEffect à chaque rendu de notre composant en passant simplement notre fonction de rappel. L’utilisation du crochet useEffect sans aucun tableau de dépendances comme deuxième argument entraînera son exécution à chaque rendu de notre composant, alors faites attention à la façon dont vous l’utilisez.

useEffect(() => {
  console.log('Run');
});

Nous ne pouvons exécuter le crochet useEffect qu’une seule fois lorsque notre composant est monté en passant simplement un tableau vide de dépendances comme deuxième argument.

useEffect(() => {
  console.log('Run only once');
}, []);

Le tableau de dépendances est très important pour le crochet useEffect. Nous pouvons passer n’importe quelle valeur que nous voulons dans notre tableau de dépendances et notre hook useEffect ne s’exécutera que lorsque l’une de ces valeurs changera.

Imaginons que nous ayons une valeur appelée nom d’utilisateur. Nous voulons que notre crochet useEffect s’exécute chaque fois que la valeur de notre nom d’utilisateur change. Nous pouvons simplement le transmettre à notre tableau de dépendances à l’intérieur de notre crochet useEffect.

useEffect(() => {
  console.log("Run only when 'username' changes");
}, [username]);

Le crochet useEffect fonctionne de manière asynchrone et nous pouvons en avoir autant d’instances que nous le voulons dans notre composant.

Avez-vous remarqué le mot en surbrillance—de manière asynchrone ? Parce que c’est la principale différence entre le hook useEffect et le hook useLayoutEffect .

Le crochet useLayoutEffect

Le useLayoutEffect le crochet fonctionne de manière synchrone. Il s’exécute immédiatement après que React a effectué toutes les mutations DOM. Il s’exécutera après chaque rendu mais avant que l’écran ne soit mis à jour.

Le crochet useLayoutEffect est très utile pour les mises à jour DOM. Nous pouvons l’utiliser pour les mesures DOM (comme une position de défilement ou des styles pour un élément spécifique), des animations, des mutations, etc.

Voici comment les crochets useLayoutEffect fonctionnent étape par étape :

1. Un nouveau rendu a été causé à l’intérieur d’un composant React.
2. React rend votre composant.
3. useLayoutEffect s’exécute de manière synchrone.
4. React attend la fin de l’exécution de useLayoutEffect.
5. L’écran est mis à jour.

Écrivons un code simple en utilisant le crochet useLayoutEffect pour voir comment cela fonctionne. Nous allons importer le useState hook et lui transmettre une valeur initiale.

import { useState, useLayoutEffect } from "react";

const App = () => {
  const [name, setName] = useState("Leonardo");

  return (
    <div>
      <h1>Hello {name}</h1>
    </div>
  );
};

Nous savons que useLayoutEffect s’exécute après chaque rendu mais avant que l’écran ne soit mis à jour, n’est-ce pas ? Ainsi, nous pouvons mettre à jour notre valeur d’état de nom si nous le voulons.

Nous allons utiliser le crochet useLayoutEffect pour modifier la valeur de notre état de nom avant la mise à jour de l’écran. Nous allons faire une comparaison et rechercher un nom spécifique (qui sera notre valeur d’état initiale) et nous allons changer notre état de nom en un autre nom.

import { useState, useLayoutEffect } from "react";

const App = () => {
  const [name, setName] = useState("Leonardo");

  useLayoutEffect(() => {
    if (name === "Leonardo") {
      setName("Jose");
    }
  }, []);

  return (
    <div>
      <h1>Hello {name}</h1>
    </div>
  );
};

Nous pouvons voir qu’avant que notre écran ne soit mis à jour, l’état du nom est mis à jour. Le useLayoutEffect s’exécute et met à jour l’état du nom avant que le navigateur n’ait la possibilité de peindre.

Conclusion

La plupart du temps le hook useEffect est suffisant et il nous servira parfaitement. C’est le crochet conçu pour exécuter des effets à l’intérieur de vos composants React.

Le crochet useLayoutEffect est très puissant et peut nous aider à effectuer des mesures DOM importantes. Nous pouvons l’utiliser pour des choses telles que des animations, des mesures, des mutations, etc. N’oubliez pas que useLayoutEffect s’exécute de manière synchrone, ce qui signifie que l’application ne sera pas mise à jour visuellement tant que votre effet n’aura pas fini de s’exécuter.

De nombreux développeurs ne savent pas que le crochet useLayoutEffect existe et ne l’ont jamais utilisé auparavant. La bonne décision est de ne pas utiliser le hook useLayoutEffect sauf si vous en avez vraiment besoin.