React 19.2 einführen: Aktivitäten für tabbige Benutzeroberflächen und eine Upgrade-Checkliste

Tabs, Assistenten und Listen außerhalb des Bildschirms weisen ein gemeinsames Problem auf: Wenn ein Panel durch bedingte Darstellung versteckt wird, wird es deinstalliert und nimmt dabei die Scrollposition, halb ausgefüllte Formulare sowie geladene Daten mit sich. React 19.2 begegnet diesem Problem mit dem Activity-Komponenten. Diese Anleitung wendet Activity auf eine Tab-Layouts an, behandelt anschließend den Rest der Neuheit sowie eine Checkliste zur Entscheidung, wann ein Upgrade durchgeführt werden sollte.

Was 19.2 beheben will

React bringt mittlerweile mehrere Versionen pro Jahr heraus, und 19.2 ist keine komplette Neufassung. Sie zielt auf alte Probleme ab: Verlust des Zustands bei Deinstallation, Schwierigkeiten mit Abhängigkeiten von Effects sowie das Spannungsverhältnis zwischen schnellen statischen Seiten und aktuellen Daten.

Activity: UI verstecken, ohne es zu zerstören

Betrachten Sie Activity als eine intelligentere Alternative zu {condition && <Panel />}. Es erhält ein mode-Attribut mit zwei Werten:

• hidden versteckt die Kinderkomponenten, deinstalliert ihre Effekte und verschiebt alle Aktualisierungen auf einen späteren Zeitpunkt, bis React keine Aufgaben mit höherer Priorität mehr hat.
• visible zeigt die Kinderkomponenten an, installiert ihre Effekte erneut und verarbeitet die Aktualisierungen wie gewohnt.

Wichtig ist, was erhalten bleibt: Der Zustand der Komponente sowie der renderierte Baum werden beibehalten, sodass ein Rückwechsel sofort möglich ist. Während der Zustand „hidden“ ist, werden die Effekte jedoch bereinigt. Dadurch stoppen Abonnements, Timer und Polling – was in der Regel genau das ist, was man für ein Panel möchte, auf das niemand schaut.

In dem untenstehenden Beispiel sind ein Einstellungspanel und ein Rechnungspanel in eigenen Activity-Grenzen eingebettet, wobei die Eigenschaft activeTab bestimmt, welches Panel sichtbar ist. Beide Panels behalten ihre Scrollposition sowie die Eingabedaten im Formular bei, wenn der Benutzer wechselt.

// Preserve a tab's scroll position and form state
// even when the user switches away from it
import { unstable_Activity as Activity } from 'react';

function ProfileTabs({ activeTab }) {
  return (
    <>
      <Activity mode={activeTab === 'settings' ? 'visible' : 'hidden'}>
        <SettingsPanel />
      </Activity>
      <Activity mode={activeTab === 'billing' ? 'visible' : 'hidden'}>
        <BillingPanel />
      </Activity>
    </>
  );
}

Eine Einschränkung: Der Codeausschnitt importiert unstable_Activity, den Namen, der in Vorab-Versionen verwendet wird. In der stabilen Version 19.2 wird das Komponente unter dem Namen Activity exportiert, daher sollten Sie die aktuellen Dokumentationen prüfen und bei einem Upgrade unter diesem Namen importieren.

Da bei jedem Wechsel nichts abgebaut und neu erstellt wird, wirkt die Navigation schneller. Der Preis dafür ist der Speicherbedarf: Jedes versteckte Panel bleibt aktiv, weshalb Activity besser für Bildschirme reserviert werden sollte, die Nutzer wahrscheinlich wieder aufsuchen, anstatt jeden Route zu umhüllen.

useEffectEvent: Aktuelle Werte ohne erneutes Ausführen von Effects

Falls Sie jemals einen Wert in ein Abhängigkeitsarray hinzugefügt haben, nur um den Linter zufriedenzustellen, und anschließend beobachtet haben, wie ein Effect ausgelöst wurde, obwohl er es nicht sollte, ist dieser Hook die Lösung. Er ermöglicht es einem Effect, über eine separate Funktion die neuesten Props und State-Werte abzurufen, ohne dass dieser Wert zu einer erneuten Ausführung führt.

Hier wird theme innerhalb von onConnected gelesen, sodass die Verbindung nur von roomId abhängt.

function ChatRoom({ roomId, theme }) {
  const onConnected = useEffectEvent(() => {
    showNotification('Connected!', theme); // always fresh theme
  });

  useEffect(() => {
    const connection = createConnection(roomId);
    connection.on('connected', () => onConnected());
    return () => connection.disconnect();
  }, [roomId]); // theme intentionally left out — and that's fine now
}

Bemerken Sie, dass im Auszug der Aufruf von connection.connect() weggelassen wurde, den eine echte Implementierung vor dem Zurückgeben der Aufräumfunktion benötigen würde.

Teilweises Vorkompilieren im React DOM

Das teilweise Vorkompilieren entstand als experimentelle Funktion in Next.js 14 und ist ab Version 19.2 über die zugrundeliegende Fähigkeit von react-dom verfügbar. React kompiliert den statischen Rahmen einer Seite im Voraus, lässt Löcher dort zurück, wo dynamische Suspense-Grenzen liegen, und füllt diese Löcher bei jeder Anfrage auf. So erhält man eine Geschwindigkeit, die der statischen Generierung nahekommt, zusammen mit der Frische von serverseitig generierten Inhalten. Unser tieferer Blick auf React 19.2s SSR-Primitiven, cacheSignal und PPR behandelt die APIs ausführlich.

Kleine Ergänzungen, die man kennen sollte

• Die Chrome DevTools erhalten React-spezifische Performance-Überwachungsfunktionen, sodass man erkennen kann, welche Aufgaben von React als blockierend, welche als Übergangsaufgabe usw. eingestuft werden.
• cacheSignal für React Server Components hilft dabei, überflüssige Arbeiten im Zusammenhang mit in Cache gespeicherten Berechnungen zu vermeiden.
• Verbesserungen beim SSR-Streaming zielen auf eine schnellere Interaktivität ab.

Sicherheit: Patchen Sie RSC-Apps zuerst

Kritische Schwachstellen in React Server Components wurden im Dezember 2025 offengelegt. Apps auf React 19.0.0 bis 19.2.2, die RSC verwenden – einschließlich der standardmäßigen create-next-app-Einstellungen – waren anfällig für Remote-Code-Execution-Angriffe. Wenn Sie Server Components nutzen, aktualisieren Sie umgehend auf eine gepatchte Version; überprüfen Sie die genauen behobenen Versionen in den offiziellen React- und Next.js-Benachrichtigungen, da weitere Patches veröffentlicht wurden.

Sollte Ihr Team jetzt upgraden?

• Upgraden Sie bald, wenn Sie komplexe SSR-Anwendungen entwickeln, UIs mit vielen Tabellen oder Schritten bereitstellen oder weiterhin mit Abhängigkeitsfehlern zu kämpfen haben.
• Upgraden Sie vorsichtig, wenn Sie eine große Legacy-Codebasis warten: Testen Sie zunächst die strengeren Hooks-Lint-Regeln in einem Branch und beheben Sie die darauf hingewiesenen Probleme.
• Upgraden Sie umgehend, unabhängig von den Funktionen, wenn Sie auf Server Components angewiesen sind und die Sicherheitspatches noch nicht angewendet haben.

Zusammenfassung

19.2 ist eine unauffällige Version, die sich im täglichen Einsatz auszahlt: Activity verändert Ihre Sichtweise auf den beibehaltenen Zustand, useEffectEvent beseitigt eine Gruppe von Abhängigkeitsworkarounds, und das Vorkomprimieren verringert den Unterschied zwischen statischen und dynamischen Seiten. Testen Sie diese Änderungen zunächst auf einem tabbaren Bildschirm, bevor Sie sie weitflächig einsetzen.

Zusätzliche Literatur

• React 19.2 SSR Primitives: Activity, cacheSignal und PPR erläutert — Erfahren Sie, wie das neue Activity-Komponente, cacheSignal sowie die Partial Pre-rendering-Funktion in React 19.2 Entwicklern direkten Einfluss auf die Leistung des Server-Renderings geben.
• Lesen Sie React Performance Tracks in Chrome DevTools, um langsame Renderungen zu finden — Lernen Sie, wie die in React 19.2 hinzugefügten Scheduler-, Components- und Server-Tracks zeigen, wo eine langsame Interaktion ihre Zeit verbringt, sowie einen Record-Fix-Record-Ablaufweg, um darauf zu reagieren.