React 19: tutte le novità

  • React
  • Gabriele Romanato

React 19 consolida il modello “full-stack React” e introduce API che semplificano mutazioni, gestione di asset, metadati e integrazione con il browser. Qui trovi un riepilogo ragionato delle feature più importanti, con snippet pronti da copiare.

1) Actions: mutazioni async più semplici

Le Actions permettono di eseguire funzioni asincrone all’interno di transizioni gestendo in modo automatico pending, errori, reset dei form e aggiornamenti ottimistici.

import { useActionState } from "react";

function ChangeName() {
  const [error, submitAction, isPending] = useActionState(
  async (_prev, formData) => {
    const name = formData.get("name");
    const res = await fetch("/api/name", { method: "POST", body: JSON.stringify({ name }) });
    if (!res.ok) return "Impossibile aggiornare il nome";
    return null;
  },
  null
);

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

Punti chiave:

  • <form action={fn}> supporta funzioni: invio, reset e stato pending sono automatici.
  • useFormStatus() consente a componenti di design system di leggere lo stato del form senza prop drilling.
  • useOptimistic() rende banali gli aggiornamenti ottimistici.

Esempio di ottimismo controllato

import { useOptimistic } from "react";
function Rename({ current }) {
  const [optimistic, setOptimistic] = useOptimistic(current);
  async function action(formData) {
    const next = formData.get("name");
    setOptimistic(next); // feedback immediato
    await fetch("/api/name", { method: "POST", body: JSON.stringify({ name: next }) });
  }
  return (
    <form action={action}>
      <p>Nome: {optimistic}</p>
      <input name="name" defaultValue={current} />
      <button type="submit">Aggiorna</button>
    </form>
  );
}

2) Nuova API use(): leggere risorse in render

use() consente di leggere Promises, context e altri tipi di risorsa direttamente durante il render: React sospende finché la risorsa non è pronta.

import { use } from "react";

function Comments({ commentsPromise }) {
  const comments = use(commentsPromise); // sospende fino al resolve
  return comments.map(c => 
{c.text}
);
}

3) React Server Components e Server Actions stabili

Le React Server Components sono supportate stabilmente in React 19. Le Server Actions possono essere definite in componenti server e passate a componenti client, o importate direttamente nei client component.

4) Metadata del documento nativi

Ora è possibile renderizzare <title>, <meta> e <link> da qualunque punto dell’albero: React li “hoista” automaticamente nell’<head>.

<h1>Post</h1>
<title>Come funziona React 19</title>
<meta name="description" content="Guida alle novità di React 19" />
<link rel="canonical" href="https://esempio.dev/react-19" />

5) Fogli di stile con precedenza e deduplicazione

React gestisce il precedence dei CSS e si assicura che i fogli siano caricati prima di rivelare i contenuti che li usano (sia in CSR che in streaming SSR). Inoltre deduplica i link ripetuti.

<link rel="stylesheet" href="/theme.css" precedence="default" />
<link rel="stylesheet" href="/overrides.css" precedence="high" />

6) Script async ovunque nell’albero

Puoi renderizzare <script async> vicino ai componenti che lo richiedono; React evita duplicati e ordina le priorità durante l’SSR.

<script async src="https://example.com/widget.js"></script>

7) API di pre-caricamento risorse

Nuove funzioni in react-dom ottimizzano il caricamento iniziale e le navigazioni anticipate.

import { preconnect, prefetchDNS, preload, preinit } from "react-dom";

preconnect("[https://cdn.example.com](https://cdn.example.com)");
prefetchDNS("[https://img.example.com](https://img.example.com)");
preload("/fonts/inter-var.woff2", { as: "font" });
preinit("/scripts/chart.js", { as: "script" });

8) Migliorie alla DX e compatibilità

  • ref come prop per function component: riduce la necessità di forwardRef.
  • <Context> come provider al posto di <Context.Provider>.
  • Diff migliori per hydration errors e gestione più robusta di script/estensioni terze parti durante l’hydration.
  • Cleanup nei ref callback: i callback possono restituire una funzione di cleanup all’unmount.
  • Custom Elements support completo: props come proprietà, anche in SSR.

9) React 19.x: rilasci incrementali

La serie 19 continua ad affinarsi (es. 19.1, 19.2) con miglioramenti a Suspense, nuove API statiche in react-dom e fix di compatibilità: valuta di tenere il minor aggiornato per beneficiare dei refinements senza cambiare API.

Consigli di adozione

  1. Allinea i warning: aggiorna prima a React 18.3.x per individuare deprecazioni e passaggi richiesti.
  2. Introduce Actions a bordo: migra i form critici a <form action={fn}> e sostituisci la gestione manuale di pending/errori con useActionState/useFormStatus.
  3. Ottimizza il caricamento: porta fogli di stile e script vicino ai componenti, usa precedence e le API di pre-caricamento.
  4. Rivedi i provider: converti gradualmente i .Provider in <Context> e sfrutta ref come prop nelle nuove componenti.
  5. Sperimenta use(): nei percorsi già basati su Suspense, semplifica il codice data-fetching.

Che cosa cambia per le librerie

Le librerie possono marcare il supporto a React Server Components con la condizione di export react-server e integrare i nuovi meccanismi di asset loading. I design system possono esporre componenti consapevoli dello stato del form tramite useFormStatus().

Conclusione

React 19 rende più ergonomiche mutazioni e UI asincrone, sposta il controllo di asset e metadati nel modello dei componenti e rafforza l’architettura full-stack. Aggiornare in modo incrementale e adottare le nuove primitive dove portano valore ti permette di ottenere benefici immediati senza rifattorizzazioni invasive.

Torna su