React 19: nowości, usunięte API i jak zaktualizować

React 19 to główna wersja Reacta wydana w grudniu 2024. Dodaje akcje (Actions, funkcje async zarządzające stanem oczekiwania, błędami i formularzami), hooki useActionState, useOptimistic i use, ref jako zwykły prop oraz tagi <title> i <meta>, które React przenosi do head dokumentu. React 19.2 (październik 2025) dodał <Activity> i useEffectEvent.

Każdy przykład poniżej działa na React 19.2. Oto akcja: funkcja async przekazana do formularza, ze stanem oczekiwania i zwróconym błędem obsłużonymi przez useActionState.

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>
    );
}

Naciśnij Save przy pustym polu, żeby zobaczyć błąd, a potem wpisz imię i zapisz: przycisk przez 800 ms pokazuje "Saving...". Nie ma tu useState dla błędu, flagi isLoading ani e.preventDefault().

Akcje i akcje formularzy

W React 18 dla każdego formularza pisałeś te same kroki: zablokuj domyślne wysłanie, ustaw flagę ładowania, poczekaj na żądanie, zapisz błąd, wyczyść flagę. React 19 nazywa funkcję, która wykonuje pracę asynchroniczną wewnątrz przejścia, akcją (Action) i sam prowadzi tę buchalterię.

• startTransition (i useTransition) przyjmują teraz funkcję async. isPending pozostaje true, dopóki cała funkcja się nie skończy.
• <form action={fn}> wywołuje fn z FormData formularza, gdy formularz jest wysyłany. Działa jako akcja, a po jej zakończeniu React resetuje niekontrolowane pola formularza.
• <button formAction={fn}> daje jednemu przyciskowi wysyłania własną akcję.
• useActionState zachowuje wartość, którą akcja zwróciła ostatnio, więc akcja może zwrócić komunikat o błędzie albo zapisany rekord.
• useFormStatus z react-dom pozwala komponentowi wewnątrz formularza odczytać, czy ten formularz jest wysyłany, bez przekazywania propsów w dół. Potrzebuje rodzica <form>, więc tutaj pojawia się w statycznym bloku:

import { useFormStatus } from 'react-dom';

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

useOptimistic

useOptimistic pokazuje wynik, którego się spodziewasz, dopóki akcja jeszcze trwa, i wraca do prawdziwego stanu, gdy akcja się kończy. Licznik polubień może wzrosnąć w chwili kliknięcia i spaść z powrotem, jeśli żądanie się nie powiedzie.

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

Strona o useOptimistic ma działający przykład z udawanym API, które celowo zawodzi, żebyś mógł obejrzeć wycofanie zmiany.

API use

use odczytuje wartość z obietnicy albo z kontekstu. Z obietnicą zawiesza komponent, dopóki obietnica się nie rozwiąże, a najbliższe <Suspense> pokazuje w tym czasie swój widok zastępczy. W odróżnieniu od każdego innego hooka use można wywołać wewnątrz if albo pętli i po wczesnym return.

React 19 pozwala też renderować bezpośrednio <ThemeContext value="dark"> zamiast <ThemeContext.Provider>. Oba pojawiają się w tym przykładzie:

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 jako prop i czyszczenie refów

Komponent funkcyjny dostaje teraz ref jak każdy inny prop. Nie musisz już owijać go w forwardRef, żeby przekazać ref do elementu DOM.

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>
    );
}

Ref callback może też zwrócić funkcję czyszczącą. React wywołuje ją, gdy element znika z ekranu, tak samo jak działa funkcja czyszcząca efektu. Callback, który nic nie zwraca, nadal jest wywoływany z null przy usunięciu, jak w 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>
    );
}

Kliknij kilka razy przycisk i przeczytaj konsolę: każde usunięcie wypisuje linię czyszczenia, każdy powrót wypisuje attached to DIV.

Metadane dokumentu

Możesz renderować <title>, <meta> i <link> w dowolnym miejscu komponentu, a React przeniesie je do <head>. Komponent strony może ustawić własny tytuł bez biblioteki takiej jak react-helmet.

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>
    );
}

Podgląd nie ma karty przeglądarki, którą mógłby pokazać, więc efekt zamiast tego wypisuje document.title. Zmieniaj artykuły, a wypisywany tytuł za nimi podąży.

Arkusze stylów potraktowano tak samo: <link rel="stylesheet" href="..." precedence="default" /> wewnątrz komponentu jest wstawiany do head raz, według kolejności pierwszeństwa, a React czeka na niego, zanim pokaże treść, która go potrzebuje. <script async src="..."> renderowany przez kilka komponentów ładuje się tylko raz. react-dom eksportuje też preload, preinit, preconnect i prefetchDNS do wskazówek o zasobach.

Activity i useEffectEvent (React 19.2)

<Activity mode="hidden"> ukrywa swoje dzieci bez wyrzucania ich stanu. React ukrywa DOM, uruchamia funkcje czyszczące efektów i przywraca wszystko, gdy tryb znów zmieni się na "visible". Pasuje do kart i paneli, do których spodziewasz się, że użytkownik wróci.

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>
    );
}

Wpisz notatkę, przełącz na About i z powrotem. Tekst nadal tam jest, a konsola pokazuje, że efekt został wyczyszczony na czas ukrycia. Zastąp opakowanie <Activity> przez {tab === 'notes' && <Notes />}, a notatka będzie ginąć przy każdym przełączeniu.

useEffectEvent wyjmuje funkcję z zależności efektu. Funkcja zawsze widzi najnowsze propsy i stan, ale ich zmiana nie uruchamia efektu od nowa:

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 dodał też cacheSignal dla komponentów serwerowych (mówi, kiedy wynik cache() nie jest już potrzebny) i ścieżki wydajności (Performance Tracks) w panelu wydajności Chrome DevTools. React 19.1 dodał captureOwnerStack, funkcję dostępną tylko w trybie deweloperskim, która zwraca, które komponenty wyrenderowały bieżący.

Komponenty serwerowe i funkcje serwerowe

Komponenty serwerowe (Server Components) to komponenty, które wykonują się z wyprzedzeniem na serwerze (albo w czasie budowania) i wysyłają swój wynik do przeglądarki. Mogą być async i bezpośrednio czytać bazę danych, a ich kod nigdy nie trafia do klienta. Funkcje serwerowe (Server Functions, wcześniej nazywane Server Actions) to funkcje async oznaczone 'use server', które komponent kliencki może wywołać jak zwykłą funkcję. Oba wymagają frameworka z bundlerem, który je obsługuje, takiego jak App Router w Next.js, więc nie da się ich uruchomić w tym edytorze.

// 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') });
}

Usunięte i zmienione API

React 19 usunął API, które od lat były oznaczone jako przestarzałe:

Komponenty klasowe zachowują defaultProps. Inaczej zgłaszane są też błędy: błędy złapane przez granicę błędów są wypisywane raz przez console.error, niezłapane trafiają do window.reportError, a createRoot przyjmuje opcje onCaughtError i onUncaughtError, żebyś mógł je zgłaszać sam.

Aktualizacja do React 19

Najpierw zaktualizuj do React 18.3. Jest identyczny z 18.2, ale ostrzega przed przestarzałymi API i innymi zmianami, których wymaga React 19, więc możesz je poprawić, dopóki aplikacja jeszcze działa. React 19 wymaga też nowoczesnej transformacji JSX, której Vite i każdy obecny framework już używają. Potem zainstaluj React 19:

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

Oficjalny przewodnik aktualizacji wskazuje codemody do mechanicznych zmian. Pierwszy obejmuje string refs, importy act i ReactDOM.render; drugi aktualizuje kod TypeScript pod nowe typy:

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

Po aktualizacji nic nie zmusza cię do przejścia na akcje ani nowe hooki. Istniejące komponenty, hooki i komponenty klasowe dalej działają; formularze możesz przenosić na <form action> po jednym.