Échappatoires

Certains de vos composants peuvent avoir besoin de contrôler et de se synchroniser avec des systèmes extérieurs à React. Par exemple, vous pourriez avoir besoin de focaliser un champ de saisie en utilisant l'API du navigateur, de lire et mettre en pause un lecteur vidéo implémenté sans React, ou de vous connecter et d'écouter les messages d'un serveur distant. Dans ce chapitre, vous apprendrez les échappatoires qui vous permettent de « sortir » de React et de vous connecter à des systèmes externes. La majeure partie de la logique de votre application et du flux de données ne devrait pas dépendre de ces fonctionnalités.

Référencer des valeurs avec les refs

Lorsque vous voulez qu'un composant « mémorise » une information, mais que vous ne voulez pas que cette informationdéclenche de nouveaux rendus, vous pouvez utiliser uneref:

Comme l'état, les refs sont conservées par React entre les rendus. Cependant, modifier l'état provoque un nouveau rendu d'un composant. Modifier une ref ne le fait pas ! Vous pouvez accéder à la valeur actuelle de cette ref via la propriétéref.current.

Une ref est comme une poche secrète de votre composant que React ne surveille pas. Par exemple, vous pouvez utiliser des refs pour stocker desidentifiants de temporisation, deséléments DOM, et d'autres objets qui n'impactent pas le rendu du composant.

Manipuler le DOM avec les refs

React met automatiquement à jour le DOM pour correspondre à votre rendu, donc vos composants n'auront souvent pas besoin de le manipuler. Cependant, il peut parfois être nécessaire d'accéder aux éléments DOM gérés par React—par exemple, pour focaliser un nœud, faire défiler jusqu'à lui, ou mesurer sa taille et sa position. Il n'y a pas de moyen intégré pour faire cela dans React, vous aurez donc besoin d'une ref vers le nœud DOM. Par exemple, cliquer sur le bouton focalisera le champ de saisie en utilisant une ref :

Synchroniser avec les Effets

Certains composants doivent se synchroniser avec des systèmes externes. Par exemple, vous pourriez vouloir contrôler un composant non-React en fonction de l'état React, établir une connexion serveur, ou envoyer un log d'analyse lorsqu'un composant apparaît à l'écran. Contrairement aux gestionnaires d'événements, qui vous permettent de traiter des événements particuliers, lesEffetsvous permettent d'exécuter du code après le rendu. Utilisez-les pour synchroniser votre composant avec un système extérieur à React.

Appuyez plusieurs fois sur Lecture/Pause et observez comment le lecteur vidéo reste synchronisé avec la valeur de la propisPlaying :

De nombreux Effets effectuent également un « nettoyage » après eux-mêmes. Par exemple, un Effet qui établit une connexion à un serveur de chat doit retourner unefonction de nettoyagequi indique à React comment déconnecter votre composant de ce serveur :

En développement, React exécutera et nettoiera immédiatement votre Effet une fois supplémentaire. C’est pourquoi vous voyez"✅ Connecting..."s’afficher deux fois. Cela garantit que vous n’oubliez pas d’implémenter la fonction de nettoyage.

Vous n’avez peut-être pas besoin d’un Effet

Les Effets sont une échappatoire au paradigme de React. Ils vous permettent de « sortir » de React et de synchroniser vos composants avec un système externe. S’il n’y a pas de système externe impliqué (par exemple, si vous souhaitez mettre à jour l’état d’un composant lorsque certaines props ou un état changent), vous ne devriez pas avoir besoin d’un Effet. Supprimer les Effets inutiles rendra votre code plus facile à suivre, plus rapide à exécuter et moins sujet aux erreurs.

Il existe deux cas courants dans lesquels vous n’avez pas besoin d’Effets :

• Vous n’avez pas besoin d’Effets pour transformer des données en vue du rendu.
• Vous n’avez pas besoin d’Effets pour gérer les événements utilisateur.

Par exemple, vous n’avez pas besoin d’un Effet pour ajuster un état en fonction d’un autre état :

Calculez plutôt autant que possible pendant le rendu :

Cependant, vousavezbesoin d’Effets pour synchroniser avec des systèmes externes.

Cycle de vie des effets réactifs

Les Effets ont un cycle de vie différent de celui des composants. Les composants peuvent être montés, mis à jour ou démontés. Un Effet ne peut faire que deux choses : démarrer la synchronisation de quelque chose, et plus tard arrêter de la synchroniser. Ce cycle peut se produire plusieurs fois si votre Effet dépend de props et d’états qui changent au fil du temps.

Cet Effet dépend de la valeur de la proproomId. Les props sont desvaleurs réactives,ce qui signifie qu’elles peuvent changer lors d’un nouveau rendu. Notez que l’Effetse resynchronise(et se reconnecte au serveur) siroomIdchange :

React fournit une règle de linter pour vérifier que vous avez correctement spécifié les dépendances de votre Effet. Si vous oubliez de spécifierroomIddans la liste des dépendances dans l’exemple ci-dessus, le linter détectera automatiquement ce bug.

Séparer les événements des Effets

Les gestionnaires d'événements ne se réexécutent que lorsque vous effectuez à nouveau la même interaction. Contrairement aux gestionnaires d'événements, les Effets se resynchronisent si l'une des valeurs qu'ils lisent, comme les props ou l'état, est différente de celle du dernier rendu. Parfois, vous voulez un mélange des deux comportements : un Effet qui se réexécute en réponse à certaines valeurs mais pas à d'autres.

Tout le code à l'intérieur des Effets estréactif.Il se réexécutera si une valeur réactive qu'il lit a changé suite à un nouveau rendu. Par exemple, cet Effet se reconnectera au chat si soitroomIdsoitthemea changé :

Ce n'est pas idéal. Vous voulez vous reconnecter au chat uniquement si leroomIda changé. Changer lethemene devrait pas provoquer de reconnexion au chat ! Déplacez le code qui litthemehors de votre Effet dans unÉvénement d'Effet:

Le code à l'intérieur des Événements d'Effet n'est pas réactif, donc changer lethemene provoque plus la reconnexion de votre Effet.

Supprimer les dépendances d'un Effet

Lorsque vous écrivez un Effet, le linter vérifie que vous avez inclus chaque valeur réactive (comme les props et l'état) que l'Effet lit dans la liste des dépendances de votre Effet. Cela garantit que votre Effet reste synchronisé avec les dernières props et l'état de votre composant. Des dépendances inutiles peuvent amener votre Effet à s'exécuter trop souvent, voire à créer une boucle infinie. La façon de les supprimer dépend du cas.

Par exemple, cet Effet dépend de l'objetoptionsqui est recréé chaque fois que vous modifiez l'entrée :

Vous ne voulez pas que le chat se reconnecte chaque fois que vous commencez à taper un message. Pour résoudre ce problème, déplacez la création de l'objetoptionsà l'intérieur de l'Effet afin que celui-ci ne dépende que de la chaîneroomId :

Notez que vous n'avez pas commencé par modifier la liste de dépendances pour supprimer la dépendanceoptions. Cela aurait été incorrect. Au lieu de cela, vous avez modifié le code environnant pour que la dépendance devienneinutile.Considérez la liste de dépendances comme une liste de toutes les valeurs réactives utilisées par le code de votre Effet. Vous ne choisissez pas intentionnellement ce qu'il faut y mettre. La liste décrit votre code. Pour changer la liste de dépendances, changez le code.

Réutiliser la logique avec des Hooks personnalisés

React est livré avec des Hooks intégrés commeuseState,useContextetuseEffect. Parfois, vous souhaiteriez qu'il existe un Hook pour un besoin plus spécifique : par exemple, pour récupérer des données, pour suivre si l'utilisateur est en ligne, ou pour se connecter à une salle de discussion. Pour cela, vous pouvez créer vos propres Hooks adaptés aux besoins de votre application.

Dans cet exemple, le Hook personnaliséusePointerPositionsuit la position du curseur, tandis que le Hook personnaliséuseDelayedValuerenvoie une valeur qui « retarde » par rapport à la valeur que vous avez passée, d'un certain nombre de millisecondes. Déplacez le curseur sur la zone d'aperçu du bac à sable pour voir une traînée de points mobiles suivre le curseur :

Vous pouvez créer des Hooks personnalisés, les composer ensemble, passer des données entre eux et les réutiliser entre les composants. À mesure que votre application grandit, vous écrirez moins d'Effets manuellement car vous pourrez réutiliser les Hooks personnalisés que vous avez déjà écrits. Il existe également de nombreux excellents Hooks personnalisés maintenus par la communauté React.

Et ensuite ?

Rendez-vous surRéférencer des valeurs avec les Refspour commencer à lire ce chapitre page par page !