React useEffect() Hook : utilisation, comment et quand l'utiliser

Introduction au hook useEffect()

useeffect accroche un composant clé.Il gère des tâches telles que la récupération de données, la configuration d'écouteurs d'événements ou la modification du DOM et permet aux utilisateurs d'effectuer des effets secondaires à l'aide de composants fonctionnels. Il contrôle également le cycle de vie des composants.

Lehook useeffect exploite deux arguments, une fonction et un tableau de dépendances facultatif.La fonction passée en premier argument est exécutée après le rendu initial du composant, puis à nouveau après chaque mise à jour. Vous pouvez indiquer les variables dont dépend un effet à l'aide du tableau de dépendances. Une nouvelle exécution de l'effet est effectuée si l'une des variables du tableau de dépendance change.

Intrinsèquement, lehook useeffect a été créé pour relever les défis rencontrés dans le cadre du cycle de vie des composants de la classe ES6.Cependant, il est maintenant devenu l'un des principaux concepts de réaction.

Avec ce résumé surce qu'est useeffect dans react , regardons maintenant sa syntaxe.

Syntaxe de base du hook useEffect()

useEffect prend en charge deux arguments ; le deuxième argument est facultatif. La syntaxe est comme ci-dessous :

useEffect(<fonction>, <dépendance>)

La fonction inclut la logique des effets secondaires. Il provoque l'exécution d'un callback directement après la mise à jour du DOM.

La dépendance contient un tableau facultatif de dépendances de vos effets secondaires, c'est-à-dire les valeurs d'état et d'accessoires. Notez que lehook use effect exécute le rappel uniquement si les dépendances ont changé pendant les rendus.

La syntaxe sert le but solitaire de useEffect(). Il vous permet de placer votre logique d'effet secondaire dans la fonction de rappel, puis d'utiliser l'argument des dépendances pour contrôler quand vous avez besoin de l'effet secondaire pour s'exécuter.

Vous pouvez considérer la syntaxe suivante lors de l'implémentation du hook useEffect() :

// importe useEffect

importer { useEffect } de 'réagir' ;

function MonComposant() {

// l'appelle au-dessus du JSX retourné

// lui passe deux arguments, c'est-à-dire un tableau et une fonction

useEffet(() => {

// fonction d'effet

retour () => {

// fonction de nettoyage

} ;

}, [/* tableau de dépendances */]);

// logique de rendu des composants

}

}

Consultez noscours de technologie gratuitspour vous démarquer de la concurrence.

Montage et démontage de composants avec le crochet useEffect()

Montage

La première étape du cycle de vie d'un composant React consiste à créer et à insérer des composants dans le DOM. Cette étape du cycle de vie de react useeffect inclut la méthode de cycle de vie componentDidMount, qui s'exécute lorsque le composant est monté.

Voici un exemple de montage de composants à l'aide du hook useEffect() .

componentDidMount() {

console.log("Le composant est monté avec succès");

this.setState({

chargé : vrai

})

}

Dans l'exemple ci-dessus, componentDidMount vous permet d'utiliser setState. Ainsi, vous pouvez facilement définir et modifier l'état dans la méthode du cycle de vie. La méthode correspondante utilise des appels d'API, appelle des points de terminaison distants et récupère des données.

Démontage

Cette méthode de cycle de vie useeffect de réaction gère le nettoyage dans un DOM.C'est comme unefonction de nettoyage useeffect qui supprime un composant du DOM.C'est ce qu'on appelle le démontage dans React. Le démontage utilise une seule méthode de cycle de vie, c'est-à-dire componentWillUnmount. Il est appelé lorsque vous souhaitez supprimer un composant du DOM.

componentWillUnmount() {

console.log("Le composant a été démonté avec succès");

}

Utilisation du hook use effect() pour gérer les changements d'état

L' effet useeffect s'exécute après chaque rendu.Il est également utilisé pour exécuter certains codes en reconnaissance d'un changement d'état. Vous pouvez contrôler le temps d'exécution de l'effet en passant le second argument dans useEffect() Hook. Le deuxième argument fonctionne comme un tableau de dépendances, c'est-à-dire que si les variables correspondantes sont modifiées, l'effet doit être réexécuté. Notez que l'état est l'un des types de variables.

La section suivante illustre un exemple pour expliquer comment lehook use effect gère les changements d'état.

Par exemple, vous souhaiterez peut-être exécuter un effet secondaire basé sur une valeur « jour ». Supposons que vous ayez un effet secondaire pour afficher un message d'accueil en fonction de la valeur du jour. La valeur du jour est enregistrée dans une variable d'état.

Chaque fois que vous choisissez un jour, l'état est mis à jour. La valeur de changement d'état vous permet de mettre à jour le message d'accueil. Vous devez transmettre la variable d'état au hook useEffect en tant que sous-ensemble du tableau de dépendances.

useEffet(() =>

{

// Effet secondaire

}, [État]);

Dans l'exemple ci-dessus de useeffect react native , l'effet secondaire s'exécuterait si la valeur de la variable d'état était mise à jour.

Explorez nos cours populaires de génie logiciel

Utilisation du hook useEffect() avec les API et les requêtes réseau

Vous pouvez utiliser le hook 'useEffect()' avec les API et les requêtes réseau pour récupérer les données d'un serveur et gérer les erreurs. Voici un exemple d'utilisation de 'useEffect()' avec une API et de gestion des erreurs réseau :

import React, { useState, useEffect } de 'react' ;

function MonComposant() {

const [données, setData] = useState(null);

const [erreur, setError] = useState(null);

useEffet(() => {

fonction asynchrone fetchData() {

essayer {

réponse const = attendre fetch('https://api.example.com/data');

si (!réponse.ok) {

throw new Error('La réponse du réseau n'était pas correcte');

}

const json = attendre la réponse.json();

setData(json);

} capture (erreur) {

setError(error);

}

}

récupérerDonnées();

}, []);

si (erreur) {

renvoie <div>Erreur : {error.message}</div> ;

}

si (!données) {

retour <div>Chargement…</div> ;

}

retour (

<div>

<p>{données.message}</p>

</div>

);

}

Vous pouvez modifier cet exemple pour inclure toute fonctionnalité supplémentaire dont vous avez besoin pour gérer les demandes réseau et les réponses API.

Techniques avancées de hook useEffect()

L'une des techniques natives avancées d'utilisation de l'effet réactif est la mémorisation.Il s'agit d'une technique d'optimisation dans laquelle la sortie d'un appel de fonction est mise en cache. Par la suite, lafonction de retour useeffect le renvoie lorsque la même entrée est à nouveau alimentée.

Une autre technique de crochet useEffect() bien connue est le crochet useMemo. Il permet de calculer une valeur et de la mémoriser. Sa syntaxe est :

importer { useMemo } de 'réagir'

const memoizedValue = useMemo(() => computeExpensiveValue(x, y), [x, y])

useEffect() Hook Dépendances

Les dépendances de hook useEffect() contiennent une liste de dépendances de votre effet secondaire tout en comprenant également des valeurs d'état ou de prop. L'argument dependencies vous permet d'intercepter certains événements du cycle de vie des composants, comme le montage d'un composant ou la mise à jour d'une valeur d'état/prop particulière.

L'argument dépendances vous permet de contrôler le moment où l'effet secondaire est invoqué, quel que soit le cycle de rendu du composant.

Rendu conditionnel avec le hook useEffect()

useEffect Hook vous permet de mettre les conditions dans le crochet. Voici un exemple.

useEffet(() => {

si (devraitExécuter) {

// (liste des conditions)

}

}, [devraitExécuter])

Vous devez mentionner les conditions obligatoires que vous souhaitez exécuter sous la fonction shouldExecute.

utiliser effect() Hook vs ComponentDidMount() et ComponentDidUpdate()

crochet useEffect() vs componentDidUpdate() :

crochet useEffect() vs componentDidMount() :

Erreurs courantes et bonnes pratiques avec le crochet useEffect().

Erreurs courantes

1. Ne pas définir les dépendances

useEffect s'exécute chaque fois qu'un composant est rendu. Par conséquent, vous devez définir les valeurs qui doivent déclencher un nouveau rendu. Sinon, votre fonction useEffect peut créer des problèmes de performances.

2. Ne pas nettoyer après avoir exécuté le hook useEffect

useEffect peut renvoyer une fonction de nettoyage qui s'exécute lorsque le composant est démonté. Ne pas nettoyer après useEffect peut créer des fuites de mémoire et d'autres problèmes. Il est donc important d'utiliser la fonction de nettoyage useeffect .

3. Utilisation de setState dans la fonction useEffect sans dépendance

Si vous mettez à jour l'état dans useEffect, cela déclenche un autre rendu. Cela peut conduire à une boucle infinie. Pour éviter cela, vous devez toujours définir la variable d'état que vous mettez à jour en tant que dépendance dans un crochet useEffect.

Explorez nos cours gratuits de développement de logiciels

Les meilleures pratiques:

• Si vous souhaitez utiliser le crochet useEffect, assurez-vous de n'en utiliser qu'un par composant. Dans le cas de plusieurs crochets useEffect, tous s'exécuteraient chaque fois qu'un composant s'afficherait. Ainsi, cela peut créer des problèmes de performances et des comportements inattendus.
• Assurez-vous de ne pas utiliser le crochet useEffect dans des conditions, des boucles ou des fonctions imbriquées. Si vous utilisez State dans la boucle for, React créera une nouvelle variable d'état à chaque exécution de la boucle. Ainsi, cela conduit à un comportement inattendu.
• Assurez-vous de ne pas abuser du crochet useEffect. Ils peuvent rendre votre code difficile à lire et peuvent influencer les performances s'ils sont trop utilisés.
• Vous devez uniquement appeler le crochet useEffect à partir des fonctions React. Si vous l'appelez à partir d'un composant de classe, vous verrez une erreur.

Conclusion

Il est préférable d'utiliser useeffect dans react si vous souhaitez accéder facilement aux accessoires et à l'état des composants sans écrire de code supplémentaire.Il simplifie considérablement les effets secondaires dans les composants car il facilite l'exécution des effets secondaires lorsque l'état ou l'accessoire change. Vous pouvez prendre en compte les aspects et les meilleures pratiques discutés ci-dessus pour vous assurer que vos composants React fonctionnent de manière optimale.

L'apprentissage de compétences exigeantes en développement de logiciels est crucial à l'ère actuelle. Vous pouvez vous doter de ces compétences de pointe en poursuivant le Master of Science en informatique de upGrad de LJMU . Le cours fait de vous un développeur de logiciels expert en transmettant des compétences telles que Java, Python et une spécialisation dans des domaines connexes. L'apprentissage approfondi des aspects abordés dans ce cours vous aide à explorer les opportunités d'emploi comme développeur javascript, ingénieur logiciel et ingénieur backend.

En plus de maîtriser les compétences en développement de logiciels, upGrad vous aide également à élever votre carrière en tant que développeur full-stack grâce à des cours tels que Executive PG Program in Full Stack Development from IIITB et Full Stack Software Development Bootcamp . Ces programmes fournissent des plateformes d'apprentissage immersives qui permettent aux candidats d'acquérir des compétences exigeantes en matière de développement complet et d'ouvrir efficacement la voie à une carrière réussie !