Double Renderings in useState verstehen

In React wird der useState-Hook häufig zum Verwalten des Komponentenstatus verwendet. Unter bestimmten Bedingungen stellen Sie jedoch möglicherweise fest, dass eine mit useState gerenderte Komponente bei jeder Statusaktualisierung zweimal gerendert wird. Dieses Verhalten hat viele Entwickler verwirrt, die den Strict Mode nicht aktiviert haben. Warum passiert das?

Die Rolle des strengen Modus

Entgegen der Annahme, dass der strenge Modus nicht aktiviert ist, wird Ihr Code tatsächlich unter seinen Einschränkungen ausgeführt. Standardmäßig verpacken moderne Versionen von React die äußerste Komponente implizit in ein -Element. Dieser Modus verbessert das Debuggen und hebt potenzielle Leistungsprobleme hervor.

Doppelter Funktionsaufruf im strengen Modus

In der Dokumentation von React heißt es ausdrücklich, dass der strenge Modus bestimmte Funktionen absichtlich „doppelt aufruft“. einschließlich der Statusaktualisierungsfunktionen, die an setState und useState übergeben werden. Das bedeutet, dass jedes Mal, wenn Sie setNumber in Ihrem Code aufrufen, diese zweimal aufgerufen wird.

Konsequenzen des doppelten Aufrufs

Dieser doppelte Aufruf führt dazu, dass die Komponente zweimal gerendert wird. Dieses Verhalten soll Entwicklern helfen, potenzielle Nebenwirkungen zu erkennen, indem es sie deterministischer macht. Standardmäßig verzögert React Aktualisierungen, wenn der useState-Hook verwendet wird. Der strikte Modus umgeht dieses Verhalten jedoch und führt dazu, dass das Rendern zweimal erfolgt.

Schlussfolgerung

Zusammenfassend ist das doppelte Rendern von Komponenten mithilfe von useState eine Folge der Ausführung Ihres Code im strikten Modus von React. Auch wenn es unerwartet erscheinen mag, ist dieses Verhalten beabsichtigt und soll die Debugging-Funktionen verbessern, indem Nebenwirkungen deutlicher sichtbar gemacht werden.