Vous souhaitez demander une fonctionnalité ou signaler un bug ?
Question de conception d'API sur useEffect
Quel est le comportement actuel ?
Actuellement, useEffect
s'exécute à chaque rendu. Ce comportement par défaut peut être dangereux dans des situations telles que le traitement des requêtes HTTP lorsque vous oubliez de passer le deuxième argument. Cela semble être une erreur courante, surtout pour les nouveaux arrivants comme moi. Je ne peux pas penser à beaucoup de modèles où vous voudriez exécuter useEffect
sur chaque rendu. Quel était le raisonnement derrière le fait de ne pas exécuter par défaut une seule fois ?
Par la conception de l'API :
useEffect(
() => {
// do something
},
[/* dependency list */]
);
useEffect
ne s'exécutera que lorsque la liste des dépendances changera, et un tableau vide []
signifie aucune dépendance (c'est-à-dire qu'il ne s'exécutera qu'une seule fois). Il me semble logique qu'une liste de dépendances non définie signifie exécuter la fonction enveloppée par useEffect
chaque rendu.
Je ne peux pas penser à beaucoup de modèles où vous voudriez exécuter
useEffect
sur chaque rendu. Quel était le raisonnement derrière le fait de ne pas exécuter par défaut une seule fois ?
Supposons que vous débutiez avec React et que vous souhaitiez faire quelque chose chaque fois qu'une variable useState
change (par exemple, POSTER la nouvelle valeur sur un serveur).
useEffect
.Je pense que la liste de dépendances est davantage destinée à être une optimisation des performances/une aide à la simplification du code.
L'API actuelle vous permet de choisir entre les comportements suivants :
componentDidMount
+ componentDidUpdate
comportement.componentDidMount
.this.props
et prevProps
dans l'API du composant de classe.Le comportement "par défaut" que vous décrivez (lorsque vous ne spécifiez pas explicitement les dépendances) est souvent le plus sûr car il empêche l'utilisation de valeurs obsolètes dans les fermetures .
À l'avenir, j'espère que nous fournirons un certain type de compilateur pour aider à automatiser une grande partie de cela. En attendant, nous fournissons un plug-in ESLint officiel pour vous aider à le rendre un peu plus facile. 😄