Pourquoi plusieurs rendus avec useState en mode non strict ?

Lorsque vous utilisez useState dans React, vous remarquerez peut-être le rendu de votre composant plus d'une fois . Ce comportement, qui peut apparaître même sans activer le mode strict, nécessite quelques éclaircissements.

En cliquant sur le bouton "Modifier le numéro", vous observerez deux instructions de console ("ici") en raison d'un rendu de composant supplémentaire. La raison derrière cela n’est pas le mode strict, comme suggéré précédemment. Au lieu de cela, React déclenche un double rendu pour faciliter un environnement de développement plus déterministe.

Selon la documentation de React, le mode non strict en développement effectue les opérations suivantes :

• Invoque intentionnellement le constructeur de composants, render et state updater fonctionnent deux fois.
• Double l'invocation des corps et des hooks des composants de fonction comme useState.

Ce double rendu offre la possibilité de détecter les effets secondaires potentiels dans votre code , mettant en évidence les problèmes de performances ou les bugs dès le début. Bien que ce rendu supplémentaire ne se produise pas en production, il constitue une aide précieuse au dépannage pendant le développement.