Utilisation de la syntaxe asynchrone dans le rappel useEffect

1. Qu’est-ce que useEffect() dans React
2. Comment utiliser la syntaxe async dans useEffect dans React
3. La meilleure solution pour utiliser la syntaxe async dans useEffect dans React

La sortie de React version 16.8 a changé la bibliothèque de plusieurs manières. Avec l’introduction des crochets, les composants fonctionnels ont acquis la capacité de maintenir l’état et de gérer les effets secondaires.

useEffect() est l’un des principaux crochets pour les composants fonctionnels de React, et il a été créé spécifiquement pour gérer les effets secondaires. C’est assez facile à comprendre, mais il y a quand même quelques mises en garde que les développeurs de React doivent savoir.

Cet article explorera l’une de ces mises en garde - comment utiliser la syntaxe async dans useEffect().

Qu’est-ce que useEffect() dans React

useEffect() est une solution qui vous permet de gérer les effets secondaires dans les composants fonctionnels. Si vous avez déjà utilisé des composants de classe, vous pouvez le considérer comme une alternative aux méthodes de cycle de vie.

Les effets secondaires dans les applications React devraient être limités à useEffect(). Les exemples courants incluent le calcul du temps ou le chargement asynchrone de données externes via des requêtes, ce qui nous amène à notre sujet principal.

Comment utiliser la syntaxe async dans useEffect dans React

Si vous essayez d’utiliser une fonction async comme rappel useEffect, vous obtiendrez une erreur indiquant que le hook ne le prend pas en charge.

Alors, que pouvez-vous faire exactement si vous devez utiliser cette syntaxe pour le chargement de données ou à toute autre fin ? Et pourquoi les créateurs de React ont-ils décidé de rendre useEffect() incompatible avec la syntaxe async ?

Commençons par la deuxième question. useEffect() ne prend pas en charge les rappels async car de telles fonctions nécessitent généralement un nettoyage.

Les effets secondaires doivent être traités avec délicatesse, et une mauvaise gestion d’une fonction asynchrone à l’intérieur du hook pourrait entraîner des fuites de mémoire ou d’autres erreurs pouvant exposer votre application. C’est pourquoi l’équipe derrière React a décidé de ne pas le permettre.

Quant à la première question, heureusement, il existe une bibliothèque qui permet de mettre des fonctions async dans useEffect() sans obtenir d’erreur.

La meilleure solution pour utiliser la syntaxe async dans useEffect dans React

Si vous devez utiliser la syntaxe async wait, la meilleure solution est d’utiliser un package use-async-effect. Ce package fournit un hook useAsyncEffect() légèrement modifié, qui a la même fonctionnalité que useEffect() mais vous permet d’utiliser la syntaxe async.

C’est très facile à apprendre. Il accepte même les mêmes arguments que le useEffect() normal.

Pour en savoir plus sur l’installation et d’autres détails, lisez les documents officiels.