React 19: novità, API rimosse e come aggiornare

React 19 è la versione major di React uscita a dicembre 2024. Aggiunge le Action (funzioni async che gestiscono stato di attesa, errori e form), gli hook useActionState, useOptimistic e use, ref come prop normale, e i tag <title> e <meta> che React sposta nell'head del documento. React 19.2 (ottobre 2025) ha aggiunto <Activity> e useEffectEvent.

Ogni esempio qui sotto gira su React 19.2. Ecco una Action: una funzione async passata a un form, con lo stato di attesa e l'errore restituito gestiti da 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>
    );
}

Premi Save con il campo vuoto per vedere l'errore, poi scrivi un nome e salva: il pulsante mostra "Saving..." per 800 ms. Non c'è alcun useState per l'errore, nessun flag isLoading e nessun e.preventDefault().

Action e form action

In React 18 scrivevi gli stessi passaggi per ogni form: impedire l'invio predefinito, impostare un flag di caricamento, attendere la richiesta, memorizzare un errore, azzerare il flag. React 19 chiama Action una funzione che svolge lavoro asincrono dentro una transizione, e si occupa lui di quella contabilità.

• startTransition (e useTransition) ora accettano una funzione async. isPending resta true finché l'intera funzione non termina.
• <form action={fn}> chiama fn con i FormData del form quando il form viene inviato. Viene eseguita come Action, e quando termina React azzera i campi non controllati del form.
• <button formAction={fn}> dà a un singolo pulsante di invio la sua azione.
• useActionState conserva il valore restituito l'ultima volta dall'azione, così un'azione può restituire un messaggio di errore o il record salvato.
• useFormStatus da react-dom permette a un componente dentro un form di leggere se quel form è in fase di invio, senza passare props verso il basso. Ha bisogno di un <form> genitore, quindi qui compare in un blocco statico:

import { useFormStatus } from 'react-dom';

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

useOptimistic

useOptimistic mostra il risultato che ti aspetti mentre una Action è ancora in esecuzione, e torna allo stato reale quando la Action termina. Un contatore di mi piace può salire nel momento in cui clicchi, e tornare indietro se la richiesta fallisce.

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

La pagina su useOptimistic ha un esempio eseguibile con una finta API che fallisce di proposito, così puoi osservare il ripristino.

L'API use

use legge un valore da una promise o da un context. Con una promise sospende il componente finché la promise non si risolve, e nel frattempo il <Suspense> più vicino mostra il suo fallback. A differenza di tutti gli altri hook, use può essere chiamato dentro un if o un ciclo, e dopo un return anticipato.

React 19 ti permette anche di renderizzare direttamente <ThemeContext value="dark"> invece di <ThemeContext.Provider>. Entrambi compaiono in questo esempio:

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 come prop, e cleanup dei ref

Ora un function component riceve ref come qualsiasi altra prop. Non hai più bisogno di racchiuderlo in forwardRef per far passare un ref fino a un elemento 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>
    );
}

Un ref callback può anche restituire una funzione di cleanup. React la chiama quando l'elemento lascia lo schermo, allo stesso modo della funzione di cleanup di un effetto. Un callback che non restituisce nulla viene comunque chiamato con null alla rimozione, come 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>
    );
}

Clicca il pulsante qualche volta e leggi la console: ogni rimozione registra la riga di cleanup, ogni ritorno registra attached to DIV.

Metadati del documento

Puoi renderizzare <title>, <meta> e <link> ovunque in un componente, e React li sposta in <head>. Un componente pagina può impostare il proprio titolo senza una libreria come 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>
    );
}

L'anteprima non ha una scheda del browser da mostrare, quindi l'effetto registra invece document.title. Cambia articolo e il titolo registrato lo segue.

I fogli di stile hanno ricevuto lo stesso trattamento: un <link rel="stylesheet" href="..." precedence="default" /> dentro un componente viene inserito nell'head una sola volta, in ordine di precedenza, e React lo aspetta prima di mostrare il contenuto che ne ha bisogno. Uno <script async src="..."> renderizzato da più componenti viene caricato una sola volta. react-dom esporta anche preload, preinit, preconnect e prefetchDNS per i suggerimenti sulle risorse.

Activity e useEffectEvent (React 19.2)

<Activity mode="hidden"> nasconde i suoi figli senza buttarne via lo stato. React nasconde il DOM, esegue le funzioni di cleanup degli effetti e ripristina tutto quando la modalità torna "visible". È adatto a schede e pannelli a cui ti aspetti che l'utente ritorni.

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

Scrivi una nota, passa ad About e torna indietro. Il testo è ancora lì, e la console mostra che l'effetto è stato pulito mentre era nascosto. Sostituisci il wrapper <Activity> con {tab === 'notes' && <Notes />} e la nota si perde a ogni cambio.

useEffectEvent toglie una funzione dalle dipendenze di un effetto. La funzione vede sempre le props e lo stato più recenti, ma cambiarli non riavvia l'effetto:

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
}

La 19.2 ha aggiunto anche cacheSignal per i Server Component (ti dice quando un risultato di cache() non serve più) e le Performance Tracks nel pannello delle prestazioni di Chrome DevTools. React 19.1 ha aggiunto captureOwnerStack, una funzione solo per lo sviluppo che restituisce quali componenti hanno renderizzato quello attuale.

Server Component e Server Function

I Server Component sono componenti che vengono eseguiti in anticipo sul server (o al momento della build) e inviano il loro output al browser. Possono essere async e leggere direttamente un database, e il loro codice non arriva mai al client. Le Server Function (chiamate inizialmente Server Action) sono funzioni async contrassegnate con 'use server' che un componente client può chiamare come una funzione normale. Entrambi richiedono un framework con un bundler che li supporti, come l'App Router di Next.js, quindi non possono girare in questo 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') });
}

API rimosse e modificate

React 19 ha rimosso API che erano deprecate da anni:

I class component mantengono defaultProps. Anche gli errori vengono segnalati in modo diverso: gli errori intercettati da un error boundary vengono registrati una volta con console.error, quelli non intercettati vanno a window.reportError, e createRoot accetta le opzioni onCaughtError e onUncaughtError per segnalarli tu stesso.

Aggiornare a React 19

Aggiorna prima a React 18.3. È identica alla 18.2 ma avvisa delle API deprecate e degli altri cambiamenti richiesti da React 19, così puoi sistemarli mentre l'app funziona ancora. React 19 richiede anche la trasformazione JSX moderna, che Vite e tutti i framework attuali usano già. Poi installa React 19:

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

La guida ufficiale all'aggiornamento rimanda ad alcuni codemod per le modifiche meccaniche. Il primo copre ref stringa, import di act e ReactDOM.render; il secondo aggiorna il codice TypeScript per i nuovi tipi:

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

Dopo l'aggiornamento, nulla ti obbliga ad adottare le Action o i nuovi hook. Componenti, hook e class component esistenti continuano a funzionare; puoi passare i form a <form action> uno alla volta.