Was React 19 beim asynchronen Rendering ändert

React 18 hat Concurrent Rendering eingeführt. React 19 ersetzt diese Grundlage nicht – es baut darauf auf, indem es standardisierte Muster für asynchrone Workflows bereitstellt, die Sie zuvor selbst implementieren mussten.

Wenn Sie bisher isPending-Zustände verwaltet, die Fehlerbehandlung über asynchrone Operationen hinweg koordiniert oder optimistische Updates manuell implementiert haben, bietet React 19 dafür erstklassige APIs. Dieser Artikel erklärt, was sich tatsächlich geändert hat und wie sich Ihr mentales Modell anpassen sollte.

Zur Referenz: Alle hier besprochenen APIs sind in der offiziellen React-Dokumentation dokumentiert: https://react.dev

Die zentrale Veränderung: Von manueller Verkabelung zu integrierten Mustern

React 18 gab uns die Concurrent-Rendering-Engine. React 19 gibt uns die Abstraktionen, die sie praktikabel machen.

Zuvor bedeutete die Verarbeitung einer asynchronen Formularübermittlung das Jonglieren mit mehreren Zustandsvariablen:

const [isPending, setIsPending] = useState(false)
const [error, setError] = useState(null)

const handleSubmit = async () => {
  setIsPending(true)
  try {
    await submitData()
  } catch (e) {
    setError(e)
  } finally {
    setIsPending(false)
  }
}

React 19 Actions eliminieren diesen Boilerplate-Code vollständig.

React 19 Actions und asynchrone Transitions

Die größte Änderung besteht darin, dass startTransition jetzt asynchrone Funktionen akzeptiert. In React 19 werden diese asynchronen Transition-Funktionen in der React-Dokumentation formal als Actions bezeichnet.

const [isPending, startTransition] = useTransition()

const handleSubmit = () => {
  startTransition(async () => {
    const error = await updateName(name)
    if (error) {
      setError(error)
      return
    }
    // Navigation oder Zustandsaktualisierung bei Erfolg durchführen
  })
}

React 19 verfolgt den ausstehenden Transition-Status für Sie, den Sie dann explizit über APIs wie useTransition oder useActionState auslesen. Alle Zustandsaktualisierungen innerhalb von startTransition werden zusammengefasst und erzeugen ein einziges Re-Rendering, wenn die asynchrone Arbeit abgeschlossen ist. Dies vermeidet Zwischenzustände, in denen isPending false ist, aber der Fehlerzustand noch nicht angewendet wurde.

useActionState: Speziell entwickelte Formularverarbeitung

Speziell für Formulare bietet useActionState integrierten Pending-Status und Ergebnisverwaltung:

const [error, submitAction, isPending] = useActionState(
  async (previousState, formData) => {
    const error = await updateName(formData.get("name"))
    if (error) return error
    // Navigation oder Aktualisierung des Anwendungszustands bei Erfolg durchführen
    return null
  },
  null
)

return (
  <form action={submitAction}>
    <input type="text" name="name" />
    <button disabled={isPending}>Aktualisieren</button>
    {error && <p>{error}</p>}
  </form>
)

React erweitert jetzt das native action-Attribut von Formularen mit integrierter Pending- und Ergebniszustandsverwaltung.

useOptimistic: Sofortiges UI-Feedback

React 19 standardisiert optimistische Updates durch useOptimistic:

const [optimisticName, setOptimisticName] = useOptimistic(currentName)

const submitAction = async (formData) => {
  const newName = formData.get("name")
  setOptimisticName(newName) // UI wird sofort aktualisiert
  const result = await updateName(newName)
  onUpdateName(result)
}

React setzt optimisticName auf currentName zurück, wenn die übergeordnete Komponente mit dem kanonischen Zustand neu gerendert wird, nachdem die Action abgeschlossen ist. Bei fehlgeschlagenen Actions stellen Sie sicher, dass Ihr übergeordneter Zustand unverändert bleibt, damit der optimistische Wert korrekt zurückgesetzt wird.

React Suspense-Änderungen und die use()-API

Die use()-API ermöglicht es Ihnen, Promises direkt während des Renderings zu lesen. Anders als Hooks funktioniert sie innerhalb von Bedingungen und Schleifen:

function Comments({ commentsPromise }) {
  const comments = use(commentsPromise)
  return comments.map(comment => <p key={comment.id}>{comment}</p>)
}

Wenn das Promise ausstehend ist, suspendiert use() die Komponente. Umschließen Sie sie mit einer Suspense-Boundary, um Fallback-UI anzuzeigen.

Wichtige Einschränkung: use() unterstützt keine Promises, die während des Renderings erstellt werden. Das Promise muss gecacht sein oder aus einer Suspense-kompatiblen Quelle stammen. Sie können use() auch nicht innerhalb von try-catch-Blöcken verwenden – Error Boundaries behandeln stattdessen Ablehnungen.

In serverfähigen Umgebungen empfiehlt die React-Dokumentation, async/await für Data-Fetching-Semantik zu bevorzugen und use() hauptsächlich für die Verwendung bereits verwalteter Promises einzusetzen.

Was sich nicht geändert hat

Die React Concurrent UI-Muster – das zugrunde liegende Scheduling, unterbrechbares Rendering und das Prioritätssystem – bleiben die React 18-Grundlage. React 19 führt keine neuen Concurrency-Konzepte ein. Es bietet höhere APIs, die bestehende Concurrent-Fähigkeiten nutzen.

Die Verschiebung des mentalen Modells geht nicht darum, neue Rendering-Mechanismen zu verstehen. Es geht darum zu erkennen, dass React jetzt asynchrone UI-Zustände verwaltet, die Sie zuvor selbst verwaltet haben.

Praktische Auswirkungen

Hören Sie auf, Pending-Zustände manuell zu implementieren. Verwenden Sie useTransition oder useActionState anstelle manueller isPending-Variablen.

Nutzen Sie Actions für Mutationen. Jede asynchrone Funktion, die in startTransition eingebettet ist, wird zu einer Action mit transition-bewusstem Scheduling.

Verwenden Sie useOptimistic für responsive UIs. Das Muster ist jetzt standardisiert, nicht etwas, das Sie ad-hoc implementieren.

Kombinieren Sie use() mit Suspense für Data Fetching. Aber denken Sie an die Caching-Anforderung – dies funktioniert am besten mit Frameworks oder Bibliotheken, die Promise-Stabilität verwalten.

Fazit

Das asynchrone Rendering in React 19 ist kein neues Paradigma. Es ist die fehlende Abstraktionsschicht, die Concurrent React für alltägliche asynchrone Workflows praktikabel macht. Durch die Bereitstellung integrierter APIs für Pending-Zustände, Formularverarbeitung, optimistische Updates und Promise-Auflösung eliminiert React 19 den Boilerplate-Code, den Entwickler seit der Einführung von Concurrent Rendering in React 18 schreiben mussten. Die Grundlage bleibt dieselbe – was sich geändert hat, ist, wie zugänglich und standardisiert diese Muster geworden sind.

Häufig gestellte Fragen (FAQs)

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.