Zwei wichtige Änderungen in React: View Transitions und Activity

• React hat neue experimentelle Funktionen vorgestellt
  • View Transitions erleichtert die Umsetzung von flüssigen Seitenübergangsanimationen
  • Activity ermöglicht Performance-Optimierungen, indem die UI ausgeblendet und ihr Zustand erhalten wird
• Darüber hinaus wird an verschiedenen Funktionen gearbeitet, darunter automatische Abhängigkeitsbehandlung, Fragment Refs und Concurrent Stores

Wichtige Merkmale von View Transitions

• Animationen werden mithilfe der neu eingeführten Browser-API startViewTransition umgesetzt
• Mit <ViewTransition> kann festgelegt werden, welche Elemente animiert werden; als Trigger können startTransition, useDeferredValue, Suspense usw. verwendet werden
• Standardmäßig wird eine Crossfade-Animation bereitgestellt, die sich per CSS anpassen lässt
• Shared-Element-Transitions werden ebenfalls unterstützt, sodass sich Elemente mit derselben name-Eigenschaft natürlich zwischen Ansichten bewegen können
• Mit der API addTransitionType lassen sich je nach Ursache des Übergangs unterschiedliche Animationen festlegen

Wichtige Merkmale von Activity

• Mit <Activity> lässt sich die UI ausblenden und ihr Zustand beibehalten oder bei Bedarf vorab rendern
• Im ausgeblendeten Modus werden Komponenten unmounted, ihr Zustand bleibt jedoch erhalten, und die Render-Priorität sinkt
• Bei Seitenwechseln können Eingabewerte oder Zustände wiederhergestellt werden, ohne dass sie verloren gehen
• Künftig sollen auch ein Modus für Modals sowie eine Funktion zum Entfernen von Zustand zur Speichereinsparung hinzukommen
• Auch beim Server-Side-Rendering (SSR) unterstützt Activity Optimierungsverhalten

Weitere Funktionen in Entwicklung

• React Performance Tracks

  • Es wird an einer Funktion gearbeitet, die dem Browser-Performance-Profiler benutzerdefinierte Tracks speziell für React hinzufügt
  • Derzeit werden noch Performance-Probleme und Fragen der Suspense-Integration gelöst

• Automatische Effect-Abhängigkeiten (Automatic Effect Dependencies)

  • Ziel ist es, über den React-Compiler useEffect-Abhängigkeiten automatisch einzufügen, um den Code kompakter und verständlicher zu machen
  • Damit soll ein Denken gefördert werden, das sich auf Effects statt auf den Komponenten-Lebenszyklus konzentriert

• Compiler IDE Extension

  • Es wird an einer IDE-Erweiterung auf Basis des React Compiler gearbeitet
  • Sie soll verschiedene Funktionen bieten, darunter Code-Optimierung, Erkennung von Regelverstößen und die Anzeige automatisch eingefügter Abhängigkeiten

• Fragment Refs

  • Es wird an Fragment Refs geforscht, mit denen mehrere DOM-Elemente über ein einziges Ref verwaltet werden können
  • Ziel ist es, Aufrufe von DOM-APIs zu vereinfachen

• Gesture Animations

  • Es laufen Untersuchungen dazu, View Transitions auch auf touchgestenbasierte Animationen auszuweiten
  • Dabei werden Probleme wie kontinuierliche Bewegung, die Behandlung unvollständiger Aktionen und die Umkehrung zwischen neuem und bestehendem DOM gelöst

• Concurrent Stores

  • Ziel ist es, externe Stores auf natürliche Weise concurrent mit React zu integrieren
  • Dafür wird eine neue API im Stil von use(store) entwickelt, die über die Grenzen von useSyncExternalStore hinausgeht