Éviter les boucles infinies lors de l’utilisation de useEffect() dans ReactJS / Blogs / Perficient

useEffect dans ReactJS

Le utiliserEffet le crochet est largement utilisé dans Réagir pour gérer les effets secondaires au sein des composants fonctionnels. Cependant, une préoccupation commune associée à son utilisation est le risque de déclencher des boucles infinies.

Dans les composants fonctionnels React, le utiliserEffet hook est utilisé pour gérer les effets secondaires, tels que la récupération de données à partir d’une API ou la mise à jour du DOM.

Cependant, il est important d’être prudent car certains scénarios peuvent entraîner des problèmes de performances et perturber la fonctionnalité prévue des composants.

Pour éviter les boucles infinies dans de telles situations, envisagez les stratégies suivantes :

1. Dépendances manquantes :

Une erreur courante provoquant des boucles infinies est d’oublier de lister les dépendances. Avec utiliserEffetil vérifie si une dépendance a changé à chaque fois que le composant est restitué.

Lorsqu’aucune dépendance n’est spécifiée, l’effet s’exécute après chaque rendu, entraînant une boucle infinie de mises à jour, notamment lorsque des modifications d’état sont impliquées.

Par exemple, considérons le code suivant :

Dans cet exemple, la séquence d’événements suivante a lieu :

1. Lorsque le composant est rendu pour la première fois, le utiliserEffet court.
2. Le utiliserEffet met à jour l’état du compte, ce qui déclenche un nouveau rendu du composant.
3. Ce nouveau rendu provoque le utiliserEffet courir à nouveau.
4. Ce cycle se répète indéfiniment, conduisant à une boucle infinie de mise à jour de l’état du décompte et de rendu du composant.

Cela se produit car il n’y a pas de tableau de dépendances, ce qui signifie que utiliserEffet s’exécute après chaque nouveau rendu du composant. Pour éviter ce problème, incluez un tableau de dépendances vide.

L’inclusion d’un tableau de dépendances vide garantit que le utiliserEffet hook ne s’exécute qu’une seule fois après le rendu initial.

De plus, si votre utiliserEffet repose sur un état spécifique, assurez-vous de l’inclure comme dépendance. De cette façon, l’effet s’exécute initialement et uniquement lorsque la dépendance spécifiée change après le nouveau rendu du composant.

2. Utilisation de références comme dépendances :

Lorsqu’une référence, telle qu’un objet ou un tableau, est utilisée comme dépendance dans utiliserEffet hook, React compare son identité plutôt que son contenu. Cela peut entraîner des effets inattendus, tels que des rendus inutiles ou des mises à jour manquées.

Pour éviter de tels problèmes, il est important de s’assurer que la référence utilisée comme dépendance est stable et que son identité ne change pas inutilement.

Dans cet exemple, données est déclaré comme un nouvel objet à chaque rendu. Même si le contenu des données reste le même, leur référence change à chaque rendu. En conséquence, le utiliserEffet le hook sera déclenché à chaque rendu, conduisant à une boucle infinie de mises à jour d’état et de nouveaux rendus.

Pour éviter ce comportement, nous pouvons utiliser le utiliserRef crochet, comme le montre l’exemple ci-dessous. Cela nous permet de conserver la même valeur lors des nouveaux rendus tout en garantissant que l’emplacement de référence de l’objet reste cohérent tout au long des cycles de rendu.

Le données est déclaré comme objet ref en utilisant utiliserRef. Vous pouvez accéder à sa valeur actuelle avec données.courant. La propriété actuelle de l’objet ref contient la valeur à laquelle vous transmettez utiliserRefet cette valeur reste cohérente dans tous les rendus du composant.

3. Utiliser des fonctions comme dépendances

Utiliser une fonction comme dépendance dans utiliserEffet() peut provoquer des boucles infinies. Puisque les fonctions sont des valeurs de référence en JavaScript, le même problème se pose qu’avec les objets. Si vous incluez une fonction ou un objet dans le tableau de dépendances d’un utiliserEffet() hook, cela peut provoquer l’exécution répétée de l’effet, entraînant une boucle infinie.

Pour éviter que la fonction soit recréée à chaque fois que le composant est restitué, nous pouvons utiliser le utiliserCallback crochet. Ce crochet mémorise la fonction, garantissant que sa référence reste stable à travers les rendus.

Le utiliserCallback hook accepte deux arguments : la fonction qui doit être mise en cache et stockée sans changer entre les rendus, et un tableau de dépendances. Si l’une des dépendances du tableau change, la fonction sera recréée.

Dans ce cas, le soumettreCount la fonction est mémorisée avec utiliserCallbackgarantissant que sa référence reste constante à travers les rendus. Cela signifie qu’il peut être inclus en toute sécurité dans le tableau de dépendances de utiliserEffet sans provoquer de réexécutions inutiles.

Pour résumer, l’utilisation de ces stratégies vous aidera à éviter efficacement les boucles infinies dans React.

Conclusion:

Éviter les boucles infinies lors de l’utilisation du utiliserEffet Le hook dans React est crucial pour maintenir des performances optimales et garantir que vos composants fonctionnent comme prévu. En comprenant les pièges courants, tels que les dépendances manquantes, les références instables et les fonctions qui déclenchent de nouveaux rendus.