Warum mehrere Renderings mit useState im nicht strikten Modus?

Wenn Sie useState in React verwenden, stellen Sie möglicherweise fest, dass Ihre Komponente mehr als einmal gerendert wird . Dieses Verhalten, das auch ohne Aktivierung des strengen Modus auftreten kann, bedarf einer Klärung.

Wenn Sie auf die Schaltfläche „Nummer ändern“ klicken, werden Sie aufgrund eines zusätzlichen Komponentenrenderings zwei Konsolenanweisungen („hier“) sehen. Der Grund dafür ist nicht der strikte Modus, wie zuvor vermutet. Stattdessen löst React ein doppeltes Rendering aus, um eine deterministischere Entwicklungsumgebung zu ermöglichen.

Laut der Dokumentation von React führt der nicht-strikte Modus in der Entwicklung Folgendes aus:

• Ruft absichtlich den Komponentenkonstruktor auf, Rendern und Zustandsaktualisierung funktionieren zweimal.
• Verdoppelt den Aufruf von Funktionskomponentenkörpern und Hooks wie useState.

Dieses doppelte Rendering bietet die Möglichkeit, potenzielle Nebenwirkungen in Ihrem Code zu erkennen , wodurch Leistungsprobleme oder Fehler frühzeitig hervorgehoben werden. Während dieses zusätzliche Rendering in der Produktion nicht erfolgt, dient es als wertvolle Hilfe bei der Fehlerbehebung während der Entwicklung.