React 19 wurde im Dezember 2024 als Stable-Release veröffentlicht und markiert das Ende einer langen Beta-Phase, in der Server Components und Concurrent-Features als Experimentier-Feld in Next.js 13 und 14 ausgereift sind. Anders als der Sprung von 17 zu 18, der primär Concurrent Rendering eingeführt hat, liefert React 19 vier zusammenhängende Bausteine: stabile RSC, Actions, neue Hooks für Optimistic-Updates und eine deutlich aufgeräumte Hydration.

React Server Components — endlich stabil

RSC sind keine isolierten Komponenten, sondern eine Architektur-Entscheidung: Ein Teil des Komponenten-Baums läuft auf dem Server, rendert dort zu einer serialisierten RSC-Payload und wird im Browser hydratisiert, ohne dass der Komponenten-Code selbst je im Client-Bundle landet. Das Schlüssel-Detail ist die Direktive 'use client' — alles ohne die Direktive ist standardmäßig Server-Code.

// app/products/page.jsx — Server Component
import { db } from '@/lib/db';
import AddToCart from './AddToCart';

export default async function ProductsPage() {
  const products = await db.product.findMany();

  return (
    <ul>
      {products.map(p => (
        <li key={p.id}>
          {p.name} — {p.price} €
          <AddToCart productId={p.id} />
        </li>
      ))}
    </ul>
  );
}

// app/products/AddToCart.jsx — Client Component
'use client';
import { useState } from 'react';

export default function AddToCart({ productId }) {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(c => c + 1)}>
      In Warenkorb ({count})
    </button>
  );
}

Die Bundle-Auswirkungen sind die zentrale Motivation: In typischen Migrations-Berichten aus 2025 reduziert sich das Client-JS-Bundle um etwa 15 bis 30 Prozent, weil Data-Fetching-Logik, ORM-Calls und Markdown-Renderer komplett auf dem Server bleiben. Eine Komponente, die marked oder prismjs importiert, schickt diese Libraries nicht mehr zum Client — die fertige HTML-Struktur reicht.

Actions — Form-Submissions ohne useState-Boilerplate

Die zweite Säule von React 19 sind Actions: Funktionen, die als action-Prop an ein <form> oder als Argument an startTransition übergeben werden und automatisch in eine Concurrent-Transition verpackt sind. Der wichtige Aspekt: Eine Action kann async sein, React wartet auf das Promise und verwaltet den Pending-State selbständig.

'use client';
import { useActionState } from 'react';
import { updateProfile } from './actions';

export default function ProfileForm({ user }) {
  const [state, formAction, isPending] = useActionState(
    updateProfile,
    { error: null }
  );

  return (
    <form action={formAction}>
      <input name="name" defaultValue={user.name} />
      <input name="email" defaultValue={user.email} />
      <button disabled={isPending}>
        {isPending ? 'Speichere…' : 'Speichern'}
      </button>
      {state.error && <p className="error">{state.error}</p>}
    </form>
  );
}

Das ersetzt das alte Pattern aus useState plus onSubmit plus manuellem Pending-Tracking. Wichtig: Wenn die Action auf dem Server läuft (mit der Direktive 'use server'), wird sie als RPC-Call serialisiert — React generiert automatisch den Fetch und übermittelt FormData, ohne dass eine eigene API-Route nötig wäre.

useOptimistic — UI-Updates vor Server-Bestätigung

Optimistic Updates waren bisher ein Pattern, das jeder von Hand gebaut hat: Lokaler State wird verändert, Request läuft, bei Fehler rollback. Der neue Hook useOptimistic macht das deklarativ:

'use client';
import { useOptimistic } from 'react';

export default function Likes({ post, likePost }) {
  const [optimisticLikes, addOptimisticLike] = useOptimistic(
    post.likes,
    (current, increment) => current + increment
  );

  async function handleLike() {
    addOptimisticLike(1);
    await likePost(post.id);
  }

  return (
    <button onClick={handleLike}>
      Like ({optimisticLikes})
    </button>
  );
}

Wenn die Action fehlschlägt oder ein neuer Wert vom Server eintrifft, wird der optimistische State automatisch durch den Server-Wert ersetzt. Kein manueller Rollback, kein Race-Condition-Handling.

useDeferredValue mit Initial-Value

Eine kleine, aber wirkungsvolle Verbesserung: useDeferredValue nimmt jetzt ein zweites Argument für den initialen Wert. Das verhindert das Suspense-Fallback beim ersten Render eines deferred Werts.

const deferred = useDeferredValue(searchTerm, '');

Ohne Initial-Value zeigt React beim ersten Render ein Suspense-Fallback, weil deferred noch undefined ist und auf den ersten Wert wartet. Mit Initial-Value startet die Komponente direkt mit einem brauchbaren Default.

Hydration und Error-Messages

Hydration-Mismatches waren der häufigste Frust-Punkt in React-SSR-Setups: Eine kryptische Warnung im Production-Build, ohne Hinweis, welche Komponente betroffen ist. React 19 liefert diff-basierte Error-Messages, die das exakte HTML-Fragment zeigen, das Server und Client unterschiedlich gerendert haben — inklusive Component-Stack. Häufige Quellen wie Date.now(), Math.random() oder Browser-Extensions, die <body> modifizieren, werden explizit benannt.

Suspense wurde so überarbeitet, dass es beim Streaming-Rendering keine unnötigen Re-Renders mehr auslöst. useTransition hat eine bessere Heuristik für lange-laufende Updates: Wenn eine Transition länger als ~200 ms dauert, wird der Fallback gerendert, statt die alte UI bis zum Ende einzufrieren.

Next.js 15 und React Router v7

Next.js 15 (Release Oktober 2024) ist das Framework, in dem RSC am tiefsten integriert sind. Der App-Router ist der Standard, der Pages-Router wird weiterhin gepflegt, aber ohne neue Features. Caching wurde grundlegend überarbeitet: GET-Routes sind in Next 15 standardmäßig nicht mehr gecacht, der fetch-Cache muss explizit aktiviert werden — eine Reaktion auf die Verwirrung in Next 13/14, wo aggressive Defaults zu unerwarteten Stale-Daten geführt haben.

Remix v2 hat 2024 die Entscheidung getroffen, in React Router v7 aufzugehen. Das vereinigte Projekt unterstützt RSC ab v7.2 und macht den Migrations-Pfad für bestehende Remix-Apps explizit: Loader und Actions bleiben funktional, neue Routes können RSC verwenden. Das ist ein vorsichtigerer Ansatz als Next.js, der die alte API nicht bricht.

Migrations-Pfad von 18 zu 19

Die meisten React-18-Apps lassen sich ohne Code-Änderung auf 19 heben — das Codemod-Tool npx codemod@latest react/19/migration-recipe deckt die Breaking-Changes ab. Die wichtigsten Brüche sind:

• propTypes und defaultProps für Function-Components sind entfernt (TypeScript ist der Standard)
• Legacy-Context (contextTypes) ist entfernt
• String-Refs (ref="myRef") sind entfernt
• react-test-renderer ist deprecated zugunsten von @testing-library/react

Für eine RSC-Migration ist der Schritt größer: Das Routing muss auf einen App-Router umgestellt werden (Next.js App-Router, React Router v7, Waku, Redwood), Data-Fetching wandert aus useEffect in Server Components, und Client-State muss explizit mit 'use client' markiert werden. Realistischer Aufwand für eine mittelgroße App: vier bis acht Wochen, dafür spart man laufend Bundle-Size und Time-to-Interactive.

Zusammenfassung

React 19 ist kein Umbau der Sprach-API, sondern die Konsolidierung von Features, die in Next.js seit 2022 inkubiert sind. Server Components sind stabil, Actions ersetzen ein halbes Dutzend manueller Patterns, useOptimistic macht UI-Updates deklarativ. Die Hydration ist deutlich diagnostizierbarer, das Streaming-Verhalten von Suspense ist berechenbar geworden.

Wer 2026 ein neues Projekt aufsetzt und SSR braucht, sollte direkt auf React 19 mit RSC starten — der Bundle-Vorteil ist real, die DX hat sich messbar verbessert. Wer eine bestehende Client-Only-SPA betreibt, kann auf React 19 heben, ohne RSC zu adoptieren, und profitiert trotzdem von Actions, useOptimistic und der besseren Hydration.