Les hooks de React constituent un outil puissant pour la gestion des effets secondaires dans les composants React. Parmi les plus utilisés, on retrouve useEffect, useLayoutEffect et useEffectEvent. Chacun de ces hooks possède une application spécifique, d’où l’importance de choisir le plus approprié selon la tâche à accomplir.
Le hook useEffect
Le hook useEffect est un élément fondamental de React, permettant d’effectuer des effets secondaires tels que la manipulation du DOM, les opérations asynchrones et la récupération de données au sein des composants fonctionnels. Ce hook se présente sous la forme d’une fonction prenant deux arguments : la fonction d’effet et le tableau de dépendances.
La fonction d’effet englobe le code qui exécute l’effet secondaire, tandis que le tableau de dépendances détermine quand cette fonction doit être exécutée. Si le tableau de dépendances est vide, la fonction d’effet ne s’exécutera qu’une seule fois lors du rendu initial du composant. Dans le cas contraire, elle sera exécutée chaque fois qu’une des valeurs du tableau de dépendances est modifiée.
Voici un exemple d’utilisation du hook useEffect pour la récupération de données :
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;
Ce fragment de code illustre un composant App qui récupère des données depuis une API externe via le hook useEffect. La fonction d’effet de useEffect utilise l’API JSONPlaceholder pour récupérer des exemples de données, puis analyse la réponse JSON et met à jour l’état des données avec les informations obtenues.
En utilisant l’état des données, le composant App affiche la propriété `title` de chaque élément contenu dans l’état.
Caractéristiques du hook useEffect
- Compatibilité asynchrone : Il prend en charge nativement les opérations asynchrones, ce qui le rend pratique pour la récupération de données.
- Exécution après le rendu : Le hook useEffect exécute ses effets après le rendu du composant par l’application, évitant ainsi de bloquer l’interface utilisateur.
- Nettoyage : Il offre une fonctionnalité intégrée pour effectuer le nettoyage en retournant une fonction. Ceci est particulièrement utile lorsque vous travaillez avec des écouteurs d’événements ou des abonnements.
Le hook useLayoutEffect
Le hook useLayoutEffect est similaire au hook useEffect mais s’exécute de façon synchrone après toutes les modifications du DOM. Cela signifie qu’il se lance avant que le navigateur puisse mettre à jour l’écran, le rendant idéal pour les tâches nécessitant un contrôle précis sur la disposition et les styles du DOM, comme mesurer la taille d’un élément, redimensionner un élément ou animer sa position.
Voici un exemple d’utilisation du hook useLayoutEffect pour modifier la largeur d’un élément de type bouton :
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;
Le code ci-dessus accroît la largeur de l’élément bouton de 12 pixels en utilisant le hook useLayoutEffect. Cela garantit que la largeur du bouton est augmentée avant que celui-ci n’apparaisse à l’écran.
Caractéristiques du hook useLayoutEffect
- Synchrone : Son exécution est synchrone, ce qui peut potentiellement bloquer l’interface utilisateur si l’opération qu’il contient est lourde.
- Lecture/écriture du DOM : Il est plus approprié pour lire et écrire directement dans le DOM, surtout si ces modifications sont nécessaires avant que le navigateur ne procède à un nouveau rendu.
Le hook useEffectEvent
Le hook useEffectEvent est un hook React destiné à résoudre les problématiques de dépendances liées au hook useEffect. Les développeurs connaissant useEffect savent que son tableau de dépendances peut s’avérer délicat. Il est parfois nécessaire d’inclure dans ce tableau des valeurs qui ne sont pas strictement indispensables.
Par exemple:
import React from "react";
function App() {
const connect = (url) => {
};
const logConnection = (message, loginOptions) => {
};
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;
Ce code montre un composant App gérant la connexion à un service externe. La fonction `connect` établit une connexion à 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 consigner un message de succès lorsque l’appareil est connecté.
Le hook useEffect appelle la fonction connect, puis configure une fonction de rappel onConnected qui s’exécutera lorsque l’appareil émet l’événement onConnected. Cette fonction de rappel enregistre un message de connexion. Il renvoie également une fonction de nettoyage qui se déclenche lors du démontage du composant. Cette fonction de nettoyage est chargée de déconnecter l’appareil.
Le tableau de dépendances contient la variable `url` et la fonction `onConnected`. Le composant App recréera la fonction `onConnected` à chaque rendu, entraînant ainsi l’exécution de la fonction useEffect en boucle et donc des rendus incessants du composant App.
Il existe plusieurs façons de résoudre ce problème de boucle useEffect. Néanmoins, la méthode la plus efficace pour éviter d’ajouter des valeurs inutiles à votre tableau de dépendances consiste à utiliser le hook useEffectEvent.
import React from "react";
function App() {
const connect = (url) => {
};
const logConnection = (message, loginOptions) => {
};
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;
En encapsulant la fonction onConnected avec le hook useEffectEvent, ce dernier est capable de lire les dernières valeurs des paramètres message et loginOptions avant de les transmettre au hook useEffect. Par conséquent, useEffect n’a plus besoin de dépendre de la fonction onConnected ou des valeurs qui lui sont transmises.
Le hook useEffectEvent s’avère utile lorsque vous souhaitez que votre useEffect dépende d’une valeur spécifique, même si l’effet déclenche un événement nécessitant d’autres valeurs que vous préférez ne pas utiliser comme dépendances dans useEffect.
Caractéristiques du hook useEffectEvent
- Il est particulièrement adapté aux effets secondaires provoqués par des événements.
- Le hook useEffectEvent ne fonctionne pas avec les gestionnaires d’événements tels que `onClick`, `onChange`, etc.
Le hook useEffectEvent est encore expérimental et n’est pas disponible dans les hooks React version 18.
Quand utiliser quel hook ?
Chacun des hooks présentés ci-dessus est adapté à des situations spécifiques :
- Récupération de données : useEffect est un excellent choix.
- Manipulations directes du DOM : Si des modifications synchrones du DOM sont requises avant la mise à jour de l’écran, il est préférable d’utiliser useLayoutEffect.
- Opérations légères : Pour les opérations qui ne risquent pas de bloquer l’interface utilisateur, useEffect peut être utilisé librement.
- Effets secondaires basés sur des événements : Utilisez le hook useEffectEvent pour encapsuler les événements, et le hook useEffect pour exécuter les effets secondaires.
Gérer efficacement les effets secondaires
Les hooks React ouvrent un vaste champ de possibilités, et la compréhension des différences entre useEffect, useLayoutEffect et useEffectEvent peut avoir un impact significatif sur la façon dont vous gérez les effets secondaires et les manipulations 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.