Welche Performance-Eigenschaften hat React Context, und wie verhinderst du, dass er die halbe App neu rendert?

Jeder Consumer rendert neu, sobald sich der Provider-Wert per Referenz ändert, egal welchen Teil des Werts er liest, denn Context hat keine Selektoren. Ein Provider mit einem großen Objekt, das bei jedem Render frisch gebaut wird, rendert also permanent alle Consumer neu. Fix ist: den Wert memoisieren, State und Dispatch in getrennte Contexts aufteilen oder die Daten in einen externen Store legen, den Consumer mit Selektoren abonnieren.

Context ist in erster Linie ein Mechanismus für Dependency Injection und erst mit weitem Abstand ein State-Manager. Das Performance-Problem ist, dass Consumer den ganzen Wert abonnieren. Ändert der Provider-Wert seine Identität, rendert alles darunter neu, auch eine Komponente, die nur ein einzelnes Boolean liest. Das Erste, was ich prüfe, ist, ob der Provider ein neues Objekt inline im JSX baut, denn das ist bei jedem Parent-Render eine neue Referenz und hebelt alles andere aus. Danach teile ich Contexts auf, denn meistens ändern sich die Daten häufig und die Setter nie, Dispatch in einen eigenen Context zu legen stoppt also den größten Teil des Rauschens. Brauche ich danach immer noch Selektoren, höre ich auf zu tun, als wäre Context ein Store, und lege den State in einen echten, den ich dann mit useSyncExternalStore oder einer Library abonniere, sodass jede Komponente sich ihren Ausschnitt zieht. Wo Context weiter hervorragend ist: bei stabilen Dingen, Theme, aktueller User, Locale, eine Client-Instanz. Die ändern sich praktisch nie, also sind die Re-Render-Kosten irrelevant.