Comprendre les doubles rendus dans useState

Dans React, le hook useState est couramment utilisé pour gérer l'état des composants. Cependant, dans certaines conditions, vous remarquerez peut-être qu'un composant rendu avec useState est rendu deux fois pour chaque mise à jour d'état. Ce comportement a dérouté de nombreux développeurs qui n'ont pas activé le mode strict. Pourquoi cela se produit-il ?

Le rôle du mode strict

Contrairement à l'hypothèse selon laquelle le mode strict n'est pas activé, votre code s'exécute en réalité sous ses contraintes. Par défaut, les versions modernes de React enveloppent implicitement le composant le plus externe dans un élément . Ce mode améliore le débogage et met en évidence les problèmes de performances potentiels.

Invocation de double fonction en mode strict

La documentation de React indique explicitement que le mode strict "invoque intentionnellement" certaines fonctions, y compris les fonctions de mise à jour d'état transmises à setState et useState. Cela signifie que chaque fois que vous appelez setNumber dans votre code, il est invoqué deux fois.

Conséquences d'une double invocation

Cette double invocation entraîne le rendu du composant deux fois. Ce comportement est destiné à aider les développeurs à repérer les effets secondaires potentiels en les rendant plus déterministes. Par défaut, React diffère les mises à jour lors de l'utilisation du hook useState. Cependant, le mode strict contourne ce comportement, provoquant un rendu double.

Conclusion

En résumé, le double rendu des composants utilisant useState est une conséquence de l'exécution de votre code sous le mode strict de React. Bien que cela puisse paraître inattendu, ce comportement est intentionnel et conçu pour améliorer les capacités de débogage en rendant les effets secondaires plus apparents.