Was löst eigentlich ein Re-Render einer React-Komponente aus, und warum ist das nicht dasselbe wie ein DOM-Update?

Eine Komponente rendert neu, wenn sich ihr eigener State ändert, wenn ein Context, den sie konsumiert, einen neuen Wert veröffentlicht, oder wenn ihr Parent neu rendert und ein neues Element für sie erzeugt. Rendern ruft nur die Funktion auf und erzeugt eine Beschreibung der UI. React diffed die dann gegen den vorherigen Baum und committet nur die DOM-Änderungen, die sich unterscheiden, die meisten Re-Renders fassen das DOM also gar nicht an.

Drei Dinge lösen es aus: ein State-Update in der Komponente, ein geänderter Context-Wert, den sie abonniert, oder ein Re-Render des Parents. Das Letzte überrascht die Leute, weil ein Parent-Render jede Kindfunktion neu ausführt, egal ob sich die Props im Wert geändert haben. Rendern erzeugt aber nur einen Element-Baum. React gleicht den gegen den vorherigen ab und committet die minimale Menge an DOM-Mutationen, ein Re-Render ist also oft billig und fasst das DOM gar nicht an. Teuer wird es bei großen Teilbäumen und schwerer Berechnung im Render-Körper. Als sich eine Seite in einem Produkt zäh angefühlt hat, habe ich den Profiler in den React DevTools geöffnet statt zu raten, und der Übeltäter war ein einzelner Context, der sowohl den aktuellen Nutzer als auch einen laufenden Suchstring hielt, jeder Tastendruck hat also die komplette eingeloggte Hülle neu gerendert. Das in zwei Contexts zu splitten hat es in etwa zehn Zeilen repariert. Zu memo greife ich erst, wenn der Profiler mir sagt, dass ein bestimmter Teilbaum das Problem ist.