Éliminez les dépendances redondantes dans useEffect de React

Question

J'ai un useEffect qui a deux dépendances :

useEffect(() => {
   doSomething();
}, [currentTenant, currentProjects])

Cependant, currentProjects est défini dans useEffect qui a currentTenant comme dépendance :

useEffect(() => {
   setCurrentProjects();
}, [currentTenant]);

doSomething() 取决于这两个状态，所以我想知道当 currentTenant 更改时 doSomething() 是否会运行两次：一次当 currentTenant 本身更改时，一次当 currentProjects （由 currentTenant 控制） ) change. < /p>

Est-ce redondant ? Quelle est la meilleure façon de procéder ? Peut-être en commençant par doSomething() useEffect 中删除 currentTenant .

Merci d'avance pour votre aide.

Answer 1

Je pense que vous rendez les choses sujettes aux erreurs et inutilement compliquées. D'après mon expérience, chaque fois que les gens. Essayez d'utiliser useEffect intelligemment, ils le gâchent.

Tout d'abord, assurez-vous currentTenant 和 currentProjects 是原语 - 我想情况还不是这样（例如名为 currentProjects quelque chose), afin que vos dépendances ne fonctionnent pas comme prévu de toute façon.

Deuxièmement, si possible, insérez doSomething() 和 setCurrentProjects() votre code afin qu'il soit plus facile de suivre les variables/dépendances sur lesquelles vous comptez réellement. Des exceptions existent si vous avez transmis ces méthodes à un composant ou si vous les avez utilisées à plusieurs endroits.

Troisièmement, ne vous fiez pas à l’ordre d’exécution pour appeler plusieurs useEffect hooks. Aucun ordre n'est garanti dans la documentation et cela n'a pas beaucoup de sens pour les appels asynchrones. Rendez-les indépendants les uns des autres. Par conséquent, ne présumez pas une redondance sans certitude. De plus, même si cela fonctionne comme prévu, il s’agit d’une optimisation prématurée : le bénéfice est négligeable, mais le code est plus difficile à comprendre.

Quatrièmement, vous comptez sur l'imagination selon laquelle rien ne changera dans vos composants, et votre futur moi ainsi que vos collègues connaîtront/se souviendront exactement de vos considérations de dépendance. Ou bien il faut le commenter avec de longues explications qui rendent l’idée plus complexe.

En général, useEffect les dépendances doivent être aussi simples et expressives que possible. Ils n'ont pas beaucoup de magie, mais ils ont beaucoup de monde. Pourtant (moi y compris), je les gâche parfois. Cela se produit lorsque vous vous écartez principalement de la règle « listez simplement toutes les primitives que vous utilisez ».