React 19.3: View Transitions stabil – Trusted Types aktivieren

React 19.3 wurde am 9. September 2026 auf npm veröffentlicht. Es handelt sich um ein Minor-Release ohne Breaking Changes – der Upgrade selbst ist also erfreulich unspektakulär. Entscheidend ist, was aus der Experimental-Schublade herausgekommen ist. View Transitions und Fragment Refs sind jetzt stabil, und zwei kleinere Ergänzungen, use(browser()) und Trusted-Types-Unterstützung, verändern leise, wie man über Rendering und Sicherheit nachdenkt.

Wir haben die Release Notes gelesen, damit Sie den Hype überspringen und direkt zu den Teilen kommen können, die echte Projekte betreffen.

Was tatsächlich veröffentlicht wurde

View Transitions befand sich etwa anderthalb Jahre hinter einem experimentellen Flag. Jetzt ist die <ViewTransition>-Komponente stabil. Sie animiert Elemente beim Ein- und Ausblenden, Bewegen oder Skalieren und greift dabei auf die View-Transition-API des Browsers zurück, gemeinsam mit startTransition, Suspense und useDeferredValue. Eine Hilfsfunktion, addTransitionType(), ermöglicht es, die Animation je nach Auslöser zu variieren – etwa »next« versus »previous« bei einem Karussell.

Fragment Refs sind ebenfalls stabil. Sie können einem <Fragment> einen Ref zuweisen und erhalten damit eine begrenzte Menge DOM-Methoden für die gesamte Gruppe der Kinder: addEventListener, focus(), observeUsing() für IntersectionObserver sowie einige Messhilfsmittel. Wer jemals eine Liste von Geschwisterelementen gerendert und dann versucht hat, einen Observer auf alle gleichzeitig zu setzen, findet hier die Lösung.

Dann gibt es zwei Dinge, die weniger Aufmerksamkeit bekommen haben, aber mehr verdienen.

use(browser()) ist ein neues Opt-out aus dem Server-Rendering. Rufen Sie es innerhalb einer Komponente auf, und React suspendiert diese Komponente auf dem Server, zeigt den Suspense-Fallback im initialen HTML und rendert sie nach der Hydration normal. Es ist für Komponenten gedacht, die tatsächlich nicht auf dem Server laufen können, etwa alles, was localStorage oder die Zeitzone des Benutzers liest.

Trusted-Types-Unterstützung ist das, was uns am meisten interessiert. React DOM hat früher jeden Wert in einen String konvertiert, bevor er an das DOM übergeben wurde. Jetzt werden TrustedHTML, TrustedScript und TrustedScriptURL unverändert durchgereicht, sodass Sie React unter einer Content Security Policy mit require-trusted-types-for 'script' betreiben und DOM-basierte XSS-Absicherung auf Plattformebene erhalten können.

Unsere Einschätzung

Beginnen Sie mit dem Sicherheitsgewinn. Bei Pentesting-Engagements finden wir DOM-basiertes XSS immer noch häufiger als Teams erwarten, meist durch einen dangerouslySetInnerHTML-Aufruf, der Daten vertraut, denen er nicht vertrauen sollte. Trusted Types verlagert die Prüfung in den Browser. Hat ein Wert keine Trusted-Types-Richtlinie durchlaufen, wirft die Zuweisung einen Fehler statt auszuführen. Das ist die Art von Schutzmaßnahme, die auch dann standhält, wenn einem Entwickler später ein Fehler unterläuft. Wenn wir Cloudflare und CSP für Kunden konfigurieren, ist das die geschichtete Kontrolle, für die wir eintreten – und jetzt hört React auf, sich dagegen zu sperren.

Das Problem ist, dass Trusted Types nur hilft, wenn Sie es einschalten. React 19.3 macht React kompatibel. Es setzt den CSP-Header nicht für Sie. Unser Rat für diese Woche ist konkret. Fügen Sie require-trusted-types-for 'script' im Report-Only-Modus hinzu, deployen Sie es und beobachten Sie die Verstoßmeldungen ein paar Wochen lang, bevor Sie es erzwingen. So finden Sie die vergessenen Stellen, ohne den Produktionsbetrieb zu stören.

Seien Sie vorsichtig mit use(browser()). Es ist eine saubere API, aber sie bedeutet, dass der Inhalt der Komponente im server-gerenderten HTML fehlt. Für ein Einstellungs-Widget ist das in Ordnung. Für alles, was eine Suchmaschine oder ein Social-Scraper sehen muss, ist der Inhalt beim ersten Laden unsichtbar. Wir haben beobachtet, wie Teams ihre eigene SEO beschädigt haben, indem sie zu viel Rendering auf den Client verlagert haben. Verwenden Sie es für reine Browser-Blattkomponenten, nicht für Inhalte, die für Crawler wichtig sind.

Mobile-Teams, kurz innehalten. View Transitions funktionieren derzeit nur im DOM. Das React-Team sagt, dass die Unterstützung für React Native in Arbeit ist, aber sie ist noch nicht verfügbar. In unserer nativen iOS- und Android-Arbeit setzen wir sowieso auf die eigenen Übergangs-APIs der Plattform, und für React-Native-Projekte würden wir das Design rund um <ViewTransition> zurückhalten, bis es tatsächlich für die Plattform erscheint. Bauen Sie keine gemeinsame Animationsschicht auf einer API auf, die nur auf einem Ziel existiert.

Eine Sache, die Sie jetzt tun können

Nehmen Sie Ihre kleinste React-App, upgraden Sie auf 19.3 in einem Branch und schalten Sie Trusted Types im Report-Only-Modus ein. Das ist eine risikoarme Möglichkeit zu sehen, wie viel unsichere DOM-Arbeit in Ihrer Codebasis steckt, und der Upgrade bringt keine Breaking Changes, die Sie verlangsamen würden. Wenn der Bericht sauber zurückkommt, gut. Wenn nicht, haben Sie gerade das Sicherheitsbacklog des nächsten Sprints gefunden.

Wenn schnelles Liefern ohne XSS-Lücken vertraut klingt, sprechen Sie mit uns. Wir machen das jede Woche für Web- und Mobile-Teams, von cloudnativen Builds bis hin zu Sicherheitsüberprüfungen.