React 19 si impara partendo da pochi concetti: i componenti, il markup in JSX, lo stile con className, lo stato, la condivisione dello stato tra componenti e gli effetti. Questa guida li attraversa nell'ordine in cui conviene studiarli, e li affianca alle novità della versione 19, pubblicata come stabile su npm il 5 dicembre 2024 secondo il post ufficiale del team React.

Componenti e JSX

I componenti sono il cuore di un'app React e rappresentano le diverse parti dell'interfaccia. Ogni componente è una funzione JavaScript che restituisce del markup, e il suo nome deve iniziare con una lettera maiuscola. Una volta creati, i componenti si includono dentro altri componenti: questa nidificazione è ciò che rende un'app più strutturata e modulare.

Il markup si scrive con JSX, una sintassi simile all'HTML che permette di definire l'interfaccia direttamente nel codice JavaScript. JSX è più rigoroso dell'HTML: i tag vanno chiusi e la nidificazione rispettata.

function Saluto({ nome }) {
  return <h1 className="titolo">Ciao, {nome}</h1>;
}

export default function App() {
  return (
    <main>
      <Saluto nome="Andrea" />
    </main>
  );
}

Stile con className

Per lo stile si aggiungono classi CSS agli elementi con l'attributo className, come nell'esempio sopra. Così la presentazione resta separata dal contenuto e il codice più ordinato.

Stato, contesto e reducer

Lo stato è la memoria interna di un componente e può cambiare mentre l'app gira. È ciò che rende le interfacce interattive: rispondono agli eventi e alle azioni dell'utente.

Quando più componenti devono condividere dati, la struttura dello stato diventa decisiva per la coerenza dell'app e la semplicità di gestione. Il contesto serve a passare i dati senza farli scendere a mano di livello in livello, e i reducer a centralizzare il modo in cui lo stato viene aggiornato. Sono i due strumenti per una condivisione efficiente e scalabile.

React 19 aggiunge una piccola semplificazione proprio sul contesto: si può scrivere <ThemeContext value="dark"> al posto di <ThemeContext.Provider>.

Effetti

Gli effetti permettono a un componente di gestire le interazioni con il browser e con i servizi esterni in modo dichiarativo. Separano la logica degli effetti da quella degli eventi, e questo rende il codice più facile da mantenere e da leggere.

Le novità di React 19

Il post ufficiale elenca, tra le principali:

  • Actions. Le funzioni asincrone possono essere usate nelle transizioni; React gestisce stato di attesa, errori, aggiornamenti ottimistici e richieste in sequenza. Gli elementi <form>, <input> e <button> accettano funzioni come action e formAction.
  • useActionState, useFormStatus e useOptimistic. I primi due gestiscono lo stato di un'azione e di un form senza passare prop a cascata; useOptimistic mostra un valore ottimistico durante una richiesta asincrona e torna al valore reale a richiesta conclusa.
  • use. Legge una promise o un contesto durante il rendering, e a differenza degli hook si può chiamare in modo condizionale.
  • ref come prop. I componenti funzione ricevono ref direttamente, quindi forwardRef non serve più.
  • Metadati nel documento. <title>, <link> e <meta> possono comparire ovunque nell'albero dei componenti e vengono spostati nell'<head>.
  • Server Components e Server Actions. I Server Components sono stabili in React 19; le Server Actions sono funzioni marcate con "use server" che il client può chiamare.

Il post elenca anche miglioramenti più piccoli ma utili nel lavoro quotidiano:

  • le callback di ref possono restituire una funzione di pulizia, che React chiama allo smontaggio;
  • useDeferredValue(value, initialValue) restituisce initialValue al primo rendering e poi si aggiorna con il valore differito;
  • <link rel="stylesheet" precedence="..."> permette a React di ordinare gli stili, deduplicarli e attenderne il caricamento prima di mostrare il contenuto che ne dipende;
  • gli errori di mismatch in idratazione vengono riportati come un unico confronto, e i tag inattesi nell'<head> o nel <body> inseriti da estensioni o script esterni vengono ignorati;
  • i Custom Elements sono supportati per intero.

Tra i cambiamenti che possono rompere codice esistente, il post segnala che le callback di ref non devono restituire valori impliciti e che ReactDOM.useFormState è deprecato in favore di React.useActionState. Per aggiornare un progetto esistente conviene partire dalla guida all'aggiornamento linkata nel post stesso.

React 19 è un passo avanti significativo per costruire app web moderne e performanti. La curva di apprendimento è accessibile e la comunità è ampia: è una tecnologia da tenere in considerazione per i progetti futuri, sapendo che le basi di questa guida restano valide tra una versione e l'altra.

Fonte: React v19, react.dev.