React: Pourquoi le comportement par défaut d'useEffect est de s'exécuter à chaque rendu ?

Créé le 26 nov. 2019  ·  3Commentaires  ·  Source: facebook/react

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 ?

Question

Tous les 3 commentaires

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).

  • Avec le comportement actuel, vous publieriez la même valeur plusieurs fois, mais vous ne manqueriez jamais de publier une valeur modifiée.
  • Avec le comportement que vous suggérez, seule la valeur initiale/la première modification serait publiée, et les modifications ultérieures ne déclencheraient pas le rappel 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 :

  • Exécutez l'effet à chaque fois. Cela imite l'ancienne classe componentDidMount + componentDidUpdate comportement.
  • Exécutez l'effet une seule fois. Cela imite l'ancien comportement componentDidMount .
  • Exécutez l'effet uniquement lorsque les dépendances changent. C'est un peu nouveau, bien que vous puissiez (et l'avez souvent fait) implémenter la même chose par le composant 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. 😄

Cette page vous a été utile?
0 / 5 - 0 notes