React 18 – die Trickserei von useEffect

Erfahren Sie mehr über ein kniffliges Verhalten des useEffect-Hooks bei der Verwendung eines strikten Modus in React 18

React 18 ist bereits seit ein paar Wochen draußen. Obwohl es eine Handvoll Verbesserungen bringt, führt es zu einem ziemlich seltsamen Verhalten bei einem der am häufigsten verwendeten Hooks. Willst du wissen, was das ist? Auf geht's…

useEffect(), das nur auf dem anfänglichen Mount laufen sollte, läuft zweimal!

Ja, Sie haben richtig gehört! Wenn Sie React 18 in einem strengen Modus verwenden, ist der folgende Codeabschnitt:

Würde eine solche Ausgabe erzeugen:

Hello there!
Hello there!

Wie in der Dokumentation angegeben , führt React 18 eine neue Prüfung nur für Entwickler in den Strict Mode ein. Diese neue Überprüfung deaktiviert automatisch jede Komponente und hängt sie erneut ein, wenn eine Komponente zum ersten Mal bereitgestellt wird, und stellt den vorherigen Zustand bei der zweiten Bereitstellung wieder her.

Eine solche Entscheidung wurde vom React-Team getroffen, da sie in Zukunft eine Funktion hinzufügen möchten, die es React ermöglicht, Abschnitte der Benutzeroberfläche hinzuzufügen und zu entfernen, während der Zustand erhalten bleibt. Da es erfordert, dass Komponenten widerstandsfähig gegen mehrfach montierte und zerstörte Effekte sind, wurde eine zusätzliche Überprüfung eingeführt.

Also wird jede Komponente montiert, dann demontiert und schließlich wieder neu montiert?

Ja, so funktioniert es jetzt. Wenn wir den useEffect()Haken so verwenden:

Nach dem Aktualisieren der Seite wäre die Ausgabe

Mounting...
Unmounting...
Mounting...

Zusammenfassung

React 18 führt eine neue Prüfung nur für Entwickler im Strict Mode ein. Bei dieser Prüfung wird die Komponente automatisch unmountet und neu gemountet, wodurch der useEffect-Hook beim anfänglichen Mounten zweimal ausgelöst wird.