useEffect |
Utilise un effet |
|---|---|
| React | |
Syntaxe
| useEffect(setup, dependencies?) |
Description
useEffect est un crochet React vous permettant de synchroniser une composante avec un système externe.
Référence
| useEffect(setup, dependencies?) |
Appelez useEffect au niveau supérieur de votre composante pour déclarer un effet :
- import { useState, useEffect } from 'react';
- import { createConnection } from './chat.js';
-
- function ChatRoom({ roomId }) {
- const [serverUrl, setServerUrl] = useState('https://localhost:1234');
-
- useEffect(() => {
- const connection = createConnection(serverUrl, roomId);
- connection.connect();
- return () => {
- connection.disconnect();
- };
- }, [serverUrl, roomId]);
- // ...
- }
Paramètres
| Nom | Description |
|---|---|
| setup | La fonction contenant la logique de votre effet. Votre fonction de configuration peut également renvoyer une fonction de nettoyage (optionnelle). Lorsque votre composante est ajouté au DOM, React exécute votre fonction de configuration. Après chaque rendu avec des dépendances modifiées, React exécute d'abord la fonction de nettoyage (si vous l'avez fournie) avec les anciennes valeurs, puis la fonction de configuration avec les nouvelles. Une fois votre composante supprimé du DOM, React exécute la fonction de nettoyage. |
| dependencies | optionnelles : La liste de toutes les valeurs réactives référencées dans le code de configuration. Les valeurs réactives incluent les propriétés, l'état et toutes les variables et fonctions déclarées directement dans le corps de votre composante. Si votre linter est configuré pour React, il vérifie que chaque valeur réactive est correctement spécifiée comme dépendance. La liste des dépendances doit comporter un nombre constant d'éléments et être écrite en ligne, comme [dep1, dep2, dep3]. React compare chaque dépendance à sa valeur précédente grâce à la comparaison Object.is. Si vous omettez cet argument, votre effet sera réexécuté après chaque rendu de la composante. Découvrez la différence entre transmettre un tableau de dépendances, un tableau vide et aucune dépendance. |
Renvoie
useEffect renvoie undefined.
Avertissements
- useEffect est un crochet ; vous ne pouvez donc l'appeler qu'au niveau supérieur de votre composante ou de vos propres crochets. Vous ne pouvez pas l'appeler à l'intérieur de boucles ou de conditions. Si nécessaire, extrayez une nouvelle composante et déplacez-y l'état.
- Si vous ne souhaitez pas vous synchroniser avec un système externe, vous n'avez probablement pas besoin d'un Effect.
- En mode strict, React exécute un cycle supplémentaire de configuration et de nettoyage, réservé au développement, avant la première configuration réelle. Il s'agit d'un test de résistance garantissant que votre logique de nettoyage reflète celle de la configuration et qu'elle arrête ou annule l'exécution de la configuration. Si cela pose problème, implémentez la fonction de nettoyage.
- Si certaines de vos dépendances sont des objets ou des fonctions définis à l'intérieur de la composante, elles risquent de provoquer des réexécutions de l'Effect plus souvent que nécessaire. Pour résoudre ce problème, supprimez les dépendances d'objets et de fonctions inutiles. Vous pouvez également extraire les mises à jour d'état et la logique non réactive en dehors de votre Effect.
- Si votre effet n'est pas dû à une interaction (comme un clic), React laissera généralement le navigateur afficher l'écran mis à jour avant de l'exécuter. Si votre effet effectue une action visuelle (par exemple, le positionnement d'une info-bulle) et que le délai est perceptible (par exemple, un scintillement), remplacez useEffect par useLayoutEffect.
- Si votre effet est dû à une interaction (comme un clic), React peut l'exécuter avant que le navigateur affiche l'écran mis à jour. Cela garantit que le résultat de l'effet peut être observé par le système d'événements. Généralement, cela fonctionne comme prévu. Cependant, si vous devez reporter le travail après l'affichage, comme une alerte (alert()), vous pouvez utiliser setTimeout. Consultez reactwg/react-18/128 pour plus d'informations.
- Même si votre effet est dû à une interaction (comme un clic), React peut autoriser le navigateur à redessiner l'écran avant de traiter les mises à jour d'état dans votre effet. Généralement, cela fonctionne comme prévu. Cependant, si vous devez empêcher le navigateur de redessiner l'écran, vous devez remplacer useEffect par useLayoutEffect.
- Les effets ne s'exécutent que sur le client. Ils ne s'exécutent pas pendant le rendu serveur.
Utilisation
Connexion à un système externe
Certaines composantes doivent rester connectés au réseau, à une API de navigateur ou à une bibliothèque tierce pendant leur affichage sur la page. Ces systèmes ne sont pas contrôlés par React ; ils sont donc dits externes.
Pour connecter votre composante à un système externe, appelez useEffect au niveau supérieur :
- import { useState, useEffect } from 'react';
- import { createConnection } from './chat.js';
-
- function ChatRoom({ roomId }) {
- const [serverUrl, setServerUrl] = useState('https://localhost:1234');
-
- useEffect(() => {
- const connection = createConnection(serverUrl, roomId);
- connection.connect();
- return () => {
- connection.disconnect();
- };
- }, [serverUrl, roomId]);
- // ...
- }
Vous devez passer deux paramètres à useEffect :
- Une fonction de configuration avec un code de configuration qui se connecte à ce système.
- Elle doit renvoyer une fonction de nettoyage avec un code de nettoyage qui se déconnecte de ce système.
- Une liste de dépendances incluant toutes les valeurs de votre composante utilisées dans ces fonctions.
React appelle vos fonctions de configuration et de nettoyage chaque fois que nécessaire, ce qui peut se produire plusieurs fois :
- Votre code de configuration s'exécute lorsque votre composante est ajouté à la page (montage).
- Après chaque nouveau rendu de votre composante dont les dépendances ont été modifiées :
- Tout d'abord, votre code de nettoyage s'exécute avec les anciennes propriétés et l'état.
- Ensuite, votre code de configuration s'exécute avec les nouvelles propriétés et l'état.
- Votre code de nettoyage s'exécute une dernière fois après la suppression de votre composante de la page (démontage).
- Illustrons cette séquence avec l'exemple ci-dessus.
Lorsque la composante ChatRoom ci-dessus est ajouté à la page, il se connecte au salon de discussion avec l'URL du serveur et l'ID du salon initiaux. Si l'URL du serveur ou l'ID du salon change suite à un nouveau rendu (par exemple, si l'utilisateur sélectionne un autre salon de discussion dans une liste déroulante), votre effet se déconnecte du salon précédent et se connecte au suivant. Lorsque la composante ChatRoom est supprimé de la page, votre effet se déconnecte une dernière fois.
Pour vous aider à détecter les bogues, React exécute les opérations de configuration et de nettoyage une fois de plus avant la configuration. Il s'agit d'un test de résistance qui vérifie que la logique de votre effet est correctement implémentée. Si cela provoque des problèmes visibles, votre fonction de nettoyage manque de logique. La fonction de nettoyage doit arrêter ou annuler l'exécution de la fonction de configuration. En règle générale, l'utilisateur ne doit pas pouvoir distinguer un appel unique à la configuration (comme en production) d'une séquence configuration → nettoyage → configuration (comme en développement). Voir les solutions courantes.
Essayez d'écrire chaque effet comme un processus indépendant et de ne considérer qu'un seul cycle de configuration/nettoyage à la fois. Peu importe que votre composante soit en cours de montage, de mise à jour ou de démontage. Lorsque votre logique de nettoyage reflète correctement la logique de configuration, votre effet peut exécuter les opérations de configuration et de nettoyage aussi souvent que nécessaire.
Remarque
Un effet vous permet de synchroniser votre composante avec un système externe (comme un service de clavardage). Ici, un système externe désigne tout morceau de code non contrôlé par React, comme :
- Un minuteur géré avec setInterval() et clearInterval() ;
- Un abonnement à un événement utilisant window.addEventListener() et window.removeEventListener() ;
- Une bibliothèque d'animation tierce avec une API comme animation.start() et animation.reset().
Si vous ne vous connectez à aucun système externe, vous n'avez probablement pas besoin d'un effet.