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

Les hooks React sont un moyen puissant de gérer les effets secondaires dans les composants React. Trois des hooks les plus courants pour gérer les effets secondaires sont useEffect, useLayoutEffect et useEffectEvent. Chaque crochet a son cas d’utilisation unique, il est donc essentiel de choisir celui qui convient le mieux au travail.

Le crochet useEffect

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

La fonction d'effet contient le code qui exécute l'effet secondaire et le tableau de dépendances détermine le moment où 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épendances change.

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

import React from"react";
functionApp() {
const [data, setData] = React.useState([]);
 React.useEffect(() => {
 fetch("")
 .then((response) => response.json())
 .then((data) => setData(data));
 }, []);
return (

"app">
 {data.map((item) => (
{item.title}</div>
 ))}
 </div>
 );
}
exportdefault App;

Ce code démontre un Application composant qui récupère les données d’une API externe à l’aide du hook useEffect. La fonction d'effet de useEffect récupère des exemples de données à partir de l'API JSONPlaceholder. Il analyse ensuite la réponse JSON et définit les données récupérées sur données État.

Avec l'état des données, le composant App restitue le titre propriété de chaque élément de l'État.

Caractéristiques de l'utilisationEffect Hook

• Compatible asynchrone: Il prend en charge les opérations asynchrones de manière native, ce qui le rend pratique pour la récupération de données.
• S'exécute après le rendu: Le hook useEffect exécute ses effets après que l'application a restitué le composant, garantissant que le hook ne bloque pas l'interface utilisateur.
• Nettoyer: Il fournit un moyen intégré d'effectuer un nettoyage en renvoyant une fonction. Cela peut être particulièrement utile lorsque vous travaillez avec des auditeurs ou des abonnements.

Le crochet useLayoutEffect

Le useLayoutEffect le crochet est similaire au utiliserEffet hook mais 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 puisse peindre l'écran, ce qui le rend adapté aux tâches qui nécessitent des contrôle sur la disposition et les styles du DOM, comme mesurer la taille d'un élément, redimensionner un élément ou animer son position.

Vous trouverez ci-dessous un exemple d'utilisation du hook useLayoutEffect pour modifier la largeur d'un bouton élément:

import React from"react";
functionApp() {
const button = React.useRef();
 React.useLayoutEffect(() => {
const { width } = button.current.getBoundingClientRect();
 button.current.style.width = `${width + 12}px`;
 }, []);
return (

"app">
Click Me</button>
 </div>
 );
}
exportdefault App;

Le bloc de code ci-dessus augmente la largeur de l'élément bouton de 12 pixels à l'aide du hook useLayoutEffect. Cela garantit que la largeur du bouton augmente avant que le bouton ne s’affiche sur votre écran.

Caractéristiques du Hook useLayoutEffect

• Synchrone: Il s'exécute de manière synchrone, bloquant potentiellement l'interface utilisateur si l'opération qu'elle contient est lourde.
• Lecture/écriture DOM: Il est mieux adapté pour lire et écrire directement dans le DOM, surtout si vous avez besoin des modifications avant que le navigateur ne soit repeint.

Le crochet useEffectEvent

Le useEffectEvent hook est un hook React qui résout les problèmes de dépendances du utiliserEffet crochet. Si vous connaissez 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épendances qui sont strictement nécessaires.

Par exemple:

import React from"react";
functionApp() {
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>;
}
exportdefault App;

Ce code démontre le Application composant qui gère une connexion à un service externe. Le connecter la fonction se connecte à une URL spécifiée, tandis que la journalConnexion La fonction enregistre les détails de la connexion. Enfin, le surConnecté la fonction appelle le journalConnexion fonction pour enregistrer un message de connexion réussie lorsque l'appareil se connecte.

Le hook useEffect appelle la fonction connect, puis configure une fonction de rappel onConnected à exécuter lorsque le appareil déclenche l'événement onConnected. Ce rappel enregistre un message de connexion. Il renvoie une fonction de nettoyage qui s'active lorsque le composant est démonté. Cette fonction de nettoyage est chargée de déconnecter l’appareil.

Le tableau de dépendances a le URL variable et le surConnecté fonction. Le composant App créera la fonction onConnected à chaque rendu. Cela entraînera l'exécution de la fonction useEffect en boucle, ce qui continuera à restituer le composant App.

Il existe plusieurs façons de résoudre le problème de la boucle useEffect. Néanmoins, le moyen le plus efficace de le faire sans ajouter de valeurs inutiles à votre tableau de dépendances consiste à utiliser le hook useEffectEvent.

import React from"react";
functionApp() {
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>;
}
exportdefault App;

En encapsulant la fonction onConnected avec le hook useEffectEvent, le hook useEffectEvent peut toujours lire les dernières valeurs du message et options de connexion paramètres avant de le transmettre au hook useEffect. Cela signifie que useEffect n'a pas besoin de s'appuyer sur la fonction onConnected ou sur les valeurs qui lui sont transmises.

Le hook useEffectEvent est utile lorsque vous souhaitez que votre useEffect dépende d'une valeur spécifique, même si le 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 utiliserEffet.

Caractéristiques du hook useEffectEvent

• Il est particulièrement adapté aux effets secondaires provoqués par des événements.
• Le useEffectEvent le hook ne fonctionne pas avec les gestionnaires d'événements comme sur clic, sur le changement, etc.

Le hook useEffectEvent est encore expérimental et indisponible dans React version 18 crochets.

Quand utiliser quel crochet?

Chacun des hooks de récupération de données ci-dessus convient à différentes situations :

• Récupération des données: Le useEffect est un excellent choix.
• Manipulations directes du DOM: Si vous devez apporter des modifications synchrones au DOM avant de repeindre, optez pour useLayoutEffect.
• Opérations légères: Pour les opérations qui ne risquent pas de bloquer l'interface utilisateur, vous pouvez utiliser librement useEffect.
• Effets secondaires liés aux é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 monde de possibilités, et comprendre la différence entre useEffect, Les hooks useLayoutEffect et useEffectEvent peuvent avoir un impact significatif sur la façon dont vous gérez les effets secondaires et le DOM. manipulation. Il est essentiel de prendre en compte les exigences et les implications spécifiques de ces hooks pour créer des applications conviviales.