Wie der React Strict Mode euch hilft eure Anwendung stabiler zu machen
In dieser Folge geht um React. Und es geht um den React Strict Mode. Der React Strict Mode hilft uns dabei unsere Anwendungen stabiler und schneller zu machen. Wie macht er das? U.a. dadurch, dass useEffect, useState und useReducer häufiger ausgeführt werden, als man das intuitiv annehmen würde. Und da sind wir natürlich drüber gestolpert. Damit ihr da nicht drüber stolpert:
Schaut doch mal in diese Folge rein!
Werte Zuseher:in!
Wir sind gestolpert! Also nicht nur weil wir ja wie Körperkläuse durch die Welt wandeln.
Unsere useReducer Reducer werden zweimal aufgerufen. Aber nur manchmal. Waaaaas?
Ihr kennt uns. Da mussten wir nachbohren.
Turns out: React will uns helfen. Etwas ungelenk zwar. Aber es hilft uns. Wo wir wieder beim Körperklaus sind.
React hat im Strict Mode im Development Modus ein Auge darauf, dass unsere Komponenten performant rendern und es keine unnötigen Render Cycles gibt. Dafür lässt er Reducer, State Initializer und Effekte häufiger laufen, als das es in Produktion der Fall wäre.
Und der Grund ist durchaus ehrenvoll. Durch die Annahme, dass Datenstrukturen unveränderlich sind, kann React tolle Optimierung durchführen.
Allerdings kann dies auch während der Entwicklung etwas überraschen.
Wie sieht das bei euch aus? Seid ihr schon über dieses Verhalten gestolpert? Wie seid ihr damit umgegangen?
Schreibt es in die Kommentare! Wir sind sehr gespannt und wir freuen uns von euch zu hören!
Liken, abonnieren, Glocke drücken nicht vergessen.
In diesem Sinne: Papperlapapp - Spaß mit Klammern!
Vielen Dank fürs Zuschauen, viel Spaß und wir freuen uns sehr auf euer Feedback!
Stefan und Holger
...
Links:
Der React Strict Mode: https://react.dev/reference/react/Str...
My useReducer runs twice: https://react.dev/reference/react/use...
My initializer or updater function runs twice https://react.dev/reference/react/use...
My Effect runs twice when the component mounts
https://react.dev/reference/react/use...
Der Code zur Folge: https://github.com/holgergp/reactDoub...
▬ Inhalt des Videos ▬▬▬▬▬▬▬▬▬▬
00:00 Intro
00:34 Die Fallstricke vom React Strict Mode
01:35 Ein Beispiel: useReducer
03:47 Warum wird der Reducer zweimal aufgerufen?
06:30 useState und die Verbindung zum React Strict Mode
08:02 useEffect
08:55 Aber warum macht React das?
10:50 Fazit