React 19: Neue Features, entfernte APIs und Upgrade

React 19 ist die im Dezember 2024 veröffentlichte Hauptversion von React. Sie bringt Actions (async-Funktionen, die Pending-Zustand, Fehler und Formulare verwalten), die Hooks useActionState, useOptimistic und use, ref als normale Prop sowie Tags <title> und <meta>, die React in den Head des Dokuments verschiebt. React 19.2 (Oktober 2025) hat <Activity> und useEffectEvent ergänzt.

Jedes Beispiel unten läuft auf React 19.2. Hier ist eine Action: eine async-Funktion, die an ein Formular übergeben wird, wobei useActionState den Pending-Zustand und den zurückgegebenen Fehler verwaltet.

import { useActionState } from 'react';

function saveName(name) {
    // Stands in for a real request
    return new Promise((resolve) => setTimeout(resolve, 800));
}

async function updateName(previousState, formData) {
    const name = formData.get('name').trim();
    if (!name) {
        return { error: 'Please type a name.', saved: previousState.saved };
    }
    await saveName(name);
    return { error: null, saved: name };
}

export default function App() {
    const [state, formAction, isPending] = useActionState(updateName, {
        error: null,
        saved: null,
    });

    return (
        <form action={formAction}>
            <input name="name" placeholder="Your name" />
            <button type="submit" disabled={isPending}>
                {isPending ? 'Saving...' : 'Save'}
            </button>
            {state.error && <p style={{ color: 'crimson' }}>{state.error}</p>}
            {state.saved && <p>Saved as {state.saved}.</p>}
        </form>
    );
}

Drück Save bei leerem Feld, um den Fehler zu sehen, tippe dann einen Namen und speichere: Der Button zeigt 800 ms lang „Saving...“. Es gibt kein useState für den Fehler, kein Flag isLoading und kein e.preventDefault().

Actions und Form Actions

In React 18 hast du für jedes Formular dieselben Schritte geschrieben: das Standard-Absenden verhindern, ein Lade-Flag setzen, auf die Anfrage warten, einen Fehler speichern, das Flag zurücksetzen. React 19 nennt eine Funktion, die async-Arbeit in einer Transition erledigt, eine Action und übernimmt diese Buchführung für dich.

• startTransition (und useTransition) nehmen jetzt eine async-Funktion an. isPending bleibt true, bis die ganze Funktion fertig ist.
• <form action={fn}> ruft beim Absenden fn mit den FormData des Formulars auf. Das läuft als Action, und danach setzt React die unkontrollierten Felder des Formulars zurück.
• <button formAction={fn}> gibt einem einzelnen Submit-Button seine eigene Action.
• useActionState behält den Wert, den die Action zuletzt zurückgegeben hat, also kann eine Action eine Fehlermeldung oder den gespeicherten Datensatz zurückgeben.
• useFormStatus aus react-dom lässt eine Komponente in einem Formular lesen, ob dieses Formular gerade absendet, ohne Props nach unten zu reichen. Es braucht ein umgebendes <form>, deshalb steht es hier in einem statischen Block:

import { useFormStatus } from 'react-dom';

function SubmitButton() {
    const { pending } = useFormStatus();
    return <button disabled={pending}>{pending ? 'Sending...' : 'Send'}</button>;
}

useOptimistic

useOptimistic zeigt das erwartete Ergebnis, während eine Action noch läuft, und fällt auf den echten State zurück, wenn die Action endet. Ein Like-Zähler kann im Moment des Klicks steigen und zurückfallen, wenn die Anfrage fehlschlägt.

const [optimisticLikes, addOptimisticLike] = useOptimistic(likes, (current, delta) => current + delta);

Die Seite zu useOptimistic hat ein ausführbares Beispiel mit einer Fake-API, die absichtlich fehlschlägt, damit du das Zurückrollen beobachten kannst.

Die use-API

use liest einen Wert aus einem Promise oder aus einem Context. Mit einem Promise suspendiert es die Komponente, bis das Promise aufgelöst ist, und das nächste <Suspense> zeigt so lange seinen Fallback. Anders als jeder andere Hook kann use in einem if oder einer Schleife aufgerufen werden und nach einem frühen return.

React 19 erlaubt außerdem, <ThemeContext value="dark"> direkt zu rendern statt <ThemeContext.Provider>. Beides kommt in diesem Beispiel vor:

import { createContext, use, useState } from 'react';

const ThemeContext = createContext('light');

function Badge({ show }) {
    if (!show) return null;
    // A normal hook could not be called after an early return. use can.
    const theme = use(ThemeContext);
    const dark = theme === 'dark';
    return (
        <span style={{ padding: '2px 8px', background: dark ? '#222' : '#eee', color: dark ? '#fff' : '#222' }}>
            Theme: {theme}
        </span>
    );
}

export default function App() {
    const [theme, setTheme] = useState('light');
    const [show, setShow] = useState(true);

    return (
        <ThemeContext value={theme}>
            <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>Switch theme</button>
            <button onClick={() => setShow(!show)}>{show ? 'Hide' : 'Show'} badge</button>
            <p>
                <Badge show={show} />
            </p>
        </ThemeContext>
    );
}

ref als Prop und Ref-Cleanup

Eine Funktionskomponente erhält ref jetzt wie jede andere Prop. Du musst sie nicht mehr in forwardRef hüllen, um eine Ref an ein DOM-Element durchzureichen.

import { useRef } from 'react';

function TextField({ label, ref }) {
    return (
        <label>
            {label} <input ref={ref} />
        </label>
    );
}

export default function App() {
    const inputRef = useRef(null);

    return (
        <div>
            <TextField label="Email" ref={inputRef} />
            <button onClick={() => inputRef.current.focus()}>Focus the field</button>
        </div>
    );
}

Ein Ref-Callback kann außerdem eine Cleanup-Funktion zurückgeben. React ruft sie auf, wenn das Element den Bildschirm verlässt, so wie das Cleanup eines Effekts. Ein Callback, der nichts zurückgibt, wird beim Entfernen weiterhin mit null aufgerufen, wie in React 18.

import { useState } from 'react';

export default function App() {
    const [visible, setVisible] = useState(true);

    return (
        <div>
            <button onClick={() => setVisible(!visible)}>{visible ? 'Remove' : 'Add'} the box</button>
            {visible && (
                <div
                    ref={(node) => {
                        console.log('attached to', node.tagName);
                        return () => console.log('cleanup: detached');
                    }}
                    style={{ marginTop: 8, padding: 12, background: '#e8f0fe' }}
                >
                    A box with a ref
                </div>
            )}
        </div>
    );
}

Klicke ein paar Mal auf den Button und lies die Konsole: Jedes Entfernen loggt die Cleanup-Zeile, jedes Zurückkommen loggt attached to DIV.

Dokument-Metadaten

Du kannst <title>, <meta> und <link> überall in einer Komponente rendern, und React verschiebt sie in den <head>. Eine Seitenkomponente kann ihren eigenen Titel ohne eine Bibliothek wie react-helmet setzen.

import { useEffect, useState } from 'react';

function Article({ title }) {
    return (
        <article>
            <title>{title}</title>
            <meta name="description" content={`An article about ${title}`} />
            <h3>{title}</h3>
        </article>
    );
}

export default function App() {
    const [title, setTitle] = useState('Hooks');

    useEffect(() => {
        console.log('document.title is now:', document.title);
    }, [title]);

    return (
        <div>
            <button onClick={() => setTitle(title === 'Hooks' ? 'Actions' : 'Hooks')}>Open the other article</button>
            <Article title={title} />
        </div>
    );
}

Die Vorschau hat keinen Browser-Tab zum Anzeigen, also loggt der Effekt stattdessen document.title. Wechsle die Artikel, und der geloggte Titel folgt.

Stylesheets wurden genauso behandelt: <link rel="stylesheet" href="..." precedence="default" /> in einer Komponente wird einmal in den Head eingefügt, nach Priorität sortiert, und React wartet darauf, bevor es den Inhalt zeigt, der es braucht. Ein <script async src="...">, das mehrere Komponenten rendern, lädt nur einmal. react-dom exportiert außerdem preload, preinit, preconnect und prefetchDNS für Ressourcen-Hinweise.

Activity und useEffectEvent (React 19.2)

<Activity mode="hidden"> versteckt seine Kinder, ohne ihren State wegzuwerfen. React versteckt das DOM, führt die Cleanups der Effekte aus und stellt alles wieder her, wenn der Modus wieder "visible" wird. Das passt zu Tabs und Panels, zu denen man voraussichtlich zurückkommt.

import { Activity, useEffect, useState } from 'react';

function Notes() {
    const [text, setText] = useState('');
    useEffect(() => {
        console.log('Notes effect: setup');
        return () => console.log('Notes effect: cleanup');
    }, []);
    return <textarea value={text} onChange={(e) => setText(e.target.value)} rows={3} placeholder="Type a note" />;
}

export default function App() {
    const [tab, setTab] = useState('notes');

    return (
        <div>
            <button onClick={() => setTab('notes')}>Notes</button>
            <button onClick={() => setTab('about')}>About</button>
            <div style={{ marginTop: 8 }}>
                <Activity mode={tab === 'notes' ? 'visible' : 'hidden'}>
                    <Notes />
                </Activity>
                {tab === 'about' && <p>Your note is kept while this tab is open.</p>}
            </div>
        </div>
    );
}

Tippe eine Notiz, wechsle zu About und zurück. Der Text ist noch da, und die Konsole zeigt, dass der Effekt im versteckten Zustand aufgeräumt wurde. Ersetze den Wrapper <Activity> durch {tab === 'notes' && <Notes />}, und die Notiz geht bei jedem Wechsel verloren.

useEffectEvent nimmt eine Funktion aus den Abhängigkeiten eines Effekts heraus. Die Funktion sieht immer die neuesten Props und den neuesten State, aber ihre Änderung startet den Effekt nicht neu:

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

    useEffect(() => {
        const connection = createConnection(roomId);
        connection.on('connected', () => onConnected());
        connection.connect();
        return () => connection.disconnect();
    }, [roomId]); // theme is not a dependency
}

19.2 hat außerdem cacheSignal für Server Components gebracht (es sagt dir, wann ein Ergebnis von cache() nicht mehr gebraucht wird) und Performance Tracks im Performance-Panel der Chrome DevTools. React 19.1 hat captureOwnerStack ergänzt, eine Funktion nur für die Entwicklung, die zurückgibt, welche Komponenten die aktuelle gerendert haben.

Server Components und Server Functions

Server Components sind Komponenten, die vorab auf dem Server (oder zur Build-Zeit) laufen und ihre Ausgabe an den Browser schicken. Sie können async sein und direkt eine Datenbank lesen, und ihr Code wird nie an den Client ausgeliefert. Server Functions (zuerst Server Actions genannt) sind async-Funktionen, markiert mit 'use server', die eine Client-Komponente wie eine normale Funktion aufrufen kann. Beide brauchen ein Framework mit einem Bundler, der sie unterstützt, etwa den App Router von Next.js, deshalb laufen sie nicht in diesem Editor.

// A Server Component: async, runs on the server only
export default async function Notes() {
    const notes = await db.notes.findMany();
    return notes.map((note) => <Note key={note.id} note={note} />);
}

// A Server Function, usable as a form action
async function createNote(formData) {
    'use server';
    await db.notes.create({ text: formData.get('text') });
}

Entfernte und geänderte APIs

React 19 hat APIs entfernt, die seit Jahren als veraltet galten:

Klassenkomponenten behalten defaultProps. Fehler werden außerdem anders gemeldet: Von einer Error Boundary abgefangene Fehler werden einmal mit console.error geloggt, nicht abgefangene Fehler gehen an window.reportError, und createRoot nimmt die Optionen onCaughtError und onUncaughtError an, um sie selbst zu melden.

Auf React 19 upgraden

Upgrade zuerst auf React 18.3. Es ist identisch mit 18.2, warnt aber vor den veralteten APIs und anderen Änderungen, die React 19 braucht, damit du sie beheben kannst, solange die App noch funktioniert. React 19 verlangt außerdem die moderne JSX-Transformation, die Vite und jedes aktuelle Framework schon nutzen. Dann installierst du React 19:

npm install react@^19 react-dom@^19
npm install --save-dev @types/react@^19 @types/react-dom@^19

Der offizielle Upgrade-Guide verweist für die mechanischen Änderungen auf Codemods. Der erste deckt String-Refs, act-Importe und ReactDOM.render ab; der zweite aktualisiert TypeScript-Code für die neuen Typen:

npx codemod@latest react/19/migration-recipe
npx types-react-codemod@latest preset-19 ./src

Nach dem Upgrade zwingt dich nichts, Actions oder die neuen Hooks zu übernehmen. Bestehende Komponenten, Hooks und Klassenkomponenten funktionieren weiter; du kannst Formulare eins nach dem anderen auf <form action> umstellen.