Wie funktioniert das Dependency-Array von useEffect, und was geht damit typischerweise schief?

React vergleicht jede Dependency mit ihrem Wert aus dem vorherigen Render per Object.is und führt den Effect nur dann erneut aus, wenn sich etwas geändert hat. Ein leeres Array heißt einmal nach dem Mount, gar kein Array heißt nach jedem Render. Schief geht es, wenn du eine Dependency weglässt und einen veralteten Wert einfängst, oder wenn du ein Objekt beziehungsweise eine Funktion reinschreibst, die bei jedem Render neu entsteht, womit der Effect endlos schleift.

React behält das Array aus dem letzten Render und vergleicht jeden Eintrag per Object.is. Passt alles, überspringt es den Effect. Weicht etwas ab, läuft erst das Cleanup des alten und dann der neue. Der Haken ist, dass der Effect die Props und den State aus dem Render einschließt, der ihn erzeugt hat. Lasse ich also etwas aus dem Array weg, arbeite ich mit einem Wert, der leise veraltet. Die andere Seite ist, ein Objekt oder eine Arrow-Funktion reinzuschreiben, denn das sind bei jedem Render neue Referenzen, und der Effect läuft in einer Schleife. Meine üblichen Fixes sind funktionale State-Updates, damit ich den aktuellen Wert nicht als Dependency brauche, Konstanten aus der Komponente rausziehen und einen Callback nur dann einpacken, wenn er wirklich Dependency sein muss. Ehrlich gesagt frage ich aber zuerst, ob der Effect überhaupt sein muss. Die meisten Effects, die ich gelöscht habe, haben abgeleiteten State berechnet, was einfach eine Rechnung während des Renders ist, oder Daten geholt, die in den Router oder eine Query-Library gehören.