avec des exemples. Si vous commencez à apprendre React ou avez déjà utilisé cette bibliothèque pendant un certain temps, vous avez sûrement rencontré des erreurs ou des avertissements liés aux fonctions asynchrones, notamment en utilisant le hook . useEffect Lorsque j'apprenais la fonctionnalité de ce crochet, je ne comprenais pas la raison d'utiliser le retour dans cette fonction puisque dans la plupart des cas, il n'est pas nécessaire de l'utiliser, et React fonctionne parfaitement bien sans lui. Au fur et à mesure que je me familiarisais avec le fonctionnement de React et le cycle de vie des composants, j'ai commencé à remarquer que dans de nombreux cas, il est trop important d'utiliser le retour dans le hook , en particulier dans les effets secondaires. useEffect Quels sont les effets secondaires? Un effet secondaire peut être la récupération de données à partir d'un serveur distant, la lecture ou l'écriture sur le stockage local, la configuration d'écouteurs d'événements ou la configuration d'un abonnement. Ces effets secondaires peuvent se produire lorsqu'un bouton est cliqué, qu'un formulaire est soumis ou lorsqu'un composant est monté et démonté. Le crochet de React permet aux composants fonctionnels de faire des choses lorsqu'un composant est monté ou lorsque certaines propriétés ou certains états changent. Ce crochet permet également de nettoyer lorsque le composant est démonté. useEffect Pourquoi nettoyer les effets secondaires ? La gestion des effets secondaires dans React est une tâche de complexité moyenne. Cependant, de temps en temps, vous pouvez rencontrer des difficultés à l'intersection du cycle de vie des composants (rendu initial, assemblage, utilisation, désassemblage) et du cycle de vie des effets secondaires (démarré, en cours, terminé). L'une de ces difficultés survient lorsqu'un effet secondaire se termine et tente de mettre à jour l'état d'un composant déjà désassemblé. Cela provoque un avertissement React comme celui-ci : Les fuites de mémoire dans les applications React résultent principalement de la non-annulation des abonnements effectués lorsqu'un composant a été monté avant que le composant ne soit démonté. Ils causent de nombreux problèmes, notamment : Affecte les performances du projet en réduisant la quantité de mémoire disponible. Ralentissement de l'application. Le système tombe en panne. Par conséquent, il est nécessaire d'éliminer les problèmes de fuite de mémoire. Qu'est-ce que la fonction de nettoyage useEffect ? C'est une fonction du crochet qui nous permet d'arrêter les effets secondaires qui n'ont plus besoin d'être exécutés avant que notre composant ne soit démonté. useEffect est construit de telle manière que nous pouvons renvoyer une fonction à l'intérieur et cette fonction de retour est l'endroit où le nettoyage se produit. useEffect Par exemple, le composant A demande à l'API d'obtenir une liste de produits, mais lors de cette demande asynchrone, le composant A est supprimé du DOM (il est démonté). Il n'est pas nécessaire de compléter cette requête asynchrone. Ainsi, en tant que méthode de nettoyage pour améliorer votre application, vous pouvez nettoyer (annuler) la requête asynchrone afin qu'elle ne soit pas terminée. : Fonction de nettoyage de useEffect useEffect(() => { // Your effect return () => { // Cleanup } }, [input]) Nettoyer un effet Annulation d'une demande de récupération Il existe différentes façons d'annuler les appels de demande de récupération, nous pouvons utiliser fetch ou Axios AbortController AbortController. Pour utiliser , nous devons créer un contrôleur en utilisant le constructeur . Ensuite, lorsque notre requête de récupération est lancée, nous transmettons en tant qu'option dans l'objet d' de la requête. AbortController AbortController() AbortSignal options Cela associe le contrôleur et le signal à la requête de récupération et nous permet de l'annuler à tout moment en utilisant : AbortController.abort() useEffect(() => { //create a controller let controller = new AbortController(); (async () => { try { const response = await fetch(API, { // connect the controller with the fetch request signal: controller.signal, }, ); // handle success setList(await response.json()); // remove the controller controller = null; } catch (e) { // Handle the error } })(); //aborts the request when the component umounts return () => controller?.abort(); },[]); useEffect(() => { // create a controller const controller = new AbortController(); axios .get(API, { signal: controller.signal }) .then({data}) => { // handle success setList(data); }) .catch((err) => { // Handle the error }); //aborts the request when the component umounts return () => controller?.abort(); }, []); Nettoyage des délais d'attente Lors de l'utilisation des fonctions de minuterie , nous pouvons les effacer lors du démontage en utilisant la fonction spéciale . setTimeout(callback, time) clearTimeout(timerId) useEffect(() => { let timerId = setTimeout(() => { // do something timerId = null; }, 3000); // cleanup the timmer when component unmout return () => clearTimeout(timerId); }, []); Intervalles de nettoyage Comme les Timeouts, les ont une fonction spéciale pour les nettoyer avec la fonction . setIntervals(callback, time) clearInterval(intervalId) useEffect(() => { let intervalId = setInterval(() => { // do something like update the state }, 1000); // cleanup the timer when component unmout return () => clearInterval(interval); }, []); Nettoyage des écouteurs d'événements Le nettoyage des écouteurs se fait via . L'appel doit faire référence à la fonction dans l'appel pour supprimer correctement l'écouteur. window.removeEventListener removeEventListener même removeEventListener useEffect(() => { // function to add to EventListener const handleKeyUp= (event) => { switch (event.key) { case "Escape": setCollapsed(true); break; } } window.addEventListener("keyup", handleKeyUp); // cleanup the listener when component unmout return () => window.removeEventListener("keyup", handleKeyUp); }, []); Nettoyer les sockets Web Lorsque vous créez un connexion, vous pouvez la fermer dans la fonction de nettoyage . WebSocket socket.close() useEffect(() => { const ws = new WebSocket(url, protocols) // do what you want with the socket ws.onmessage = (event) => { setValue(JSON.parse(event.data)); }; // cleanup the web socket when component unmout return () => ws.close() }, []) Conclusion Nous avons appris que certains effets secondaires nécessitent un nettoyage pour éviter les fuites de mémoire et les comportements inutiles et indésirables. Nous devons apprendre quand et comment utiliser la fonction de nettoyage du crochet pour éviter ces problèmes et optimiser les applications. useEffect Je recommande de nettoyer les effets asynchrones lorsque le composant est démonté. De plus, si l'effet secondaire asynchrone dépend des valeurs d'accessoire ou d'état, envisagez également de les nettoyer lorsque le composant est mis à jour. J'espère que vous avez trouvé cet article utile et que vous pouvez maintenant utiliser correctement la fonction de nettoyage. Lire la suite: https://hackernoon.com/autocomplete-search-component-with-react-and-typescript?embedable=true Également publié . ici
