Novità React 19.2

Novità React 19.2

React 19.2 è stato rilasciato il 1 ottobre 2025 ed è già disponibile su npm. Si tratta della terza release in un anno (dopo React 19 e 19.1) focalizzata su miglioramenti delle prestazioni, della developer experience e su nuove API che semplificano la scrittura del codice. In questo articolo vedremo le principali novità di React 19.2, come sfruttarle nelle applicazioni esistenti e forniremo consigli utili per affrontare l’aggiornamento. Al termine discuteremo vantaggi e possibili criticità di questa versione e indicheremo come migrare i progetti esistenti, con esempi di codice pratici.

In precedenti articoli abbiamo raccontato le novità di React 19 e di React 18.

Principali novità React 19.2

La release 19.2 introduce diverse nuove funzionalità e strumenti per gli sviluppatori. Tra i cambiamenti più interessanti segnaliamo:

• <Activity />: un nuovo componente di layout che permette di nascondere o mostrare parti dell’interfaccia senza perdere il loro stato interno
• useEffectEvent: un nuovo Hook che separa le funzioni “evento” da effetti complessi, evitando ricollegamenti inutili in caso di dipendenze che cambiano.
• cacheSignal: una API dedicata alle React Server Components che segnala la scadenza di una cache, utile per annullare operazioni non più necessarie.
• Performance Tracks: nuovi tracciamenti (“custom tracks”) nelle DevTools di Chrome per analizzare in dettaglio il lavoro di React (Scheduler, rendering di componenti, ecc.)
• Pre-rendering parziale: in ReactDOM sono state introdotte API per effettuare un pre-rendering parziale dell’applicazione, salvare lo stato sospeso e riprenderlo in un secondo momento.
• Batching dei boundary di Suspense: in fase di Server-Side Rendering (SSR) React ora raggruppa i contenuti Suspense da mostrare insieme per migliorare l’esperienza di caricamento
• Web Streams in Node.js: è ora possibile usare le Web Streams API per lo streaming SSR in ambiente Node (anche se React raccomanda di continuare a usare i Node Streams, più performanti, per la maggior parte dei casi).
• Aggiornamenti agli strumenti di sviluppo: è stato rilasciato eslint-plugin-react-hooks@6.x con nuove regole per i nuovi Hooks di React, e il prefisso usato da useId è stato cambiato da caratteri speciali (:r:, «r») a _r_ per compatibilità con le View Transitions.

Di seguito analizziamo le novità più rilevanti, con esempi pratici di utilizzo.

<Activity />: nascondere componenti mantenendo lo stato

Il nuovo componente <Activity> permette di gestire parti dell’interfaccia come “attività” che possono essere nascoste o mostrate senza perderne lo stato interno. In particolare, <Activity> supporta due modalità:

• hidden: nasconde i figli, smonta gli effetti (cleanup) e rinvia tutti gli aggiornamenti fino a quando React non ha tempo libero.
• visible: mostra i figli, rimonta gli effetti e aggiorna normalmente.

In pratica, <Activity> è un’alternativa al classico conditional rendering. Ad esempio, nel codice tradizionale si potrebbe fare:

{isVisible && <Page />}

con il costrutto <Activity> si può ottenere lo stesso effetto ma con vantaggi di performance:

<Activity mode={isVisible ? 'visible' : 'hidden'}>
  <Page />
</Activity>

Come descritto nelle note ufficiali, usare <Activity> consente di pre-renderizzare parti nascoste dell’app (ad esempio la schermata successiva) in background senza impattare sulle parti visibili. Questo rende più rapide le navigazioni perché, ad esempio, dati e risorse (immagini, CSS) di schermate remote possono essere caricati in anticipo mentre l’utente interagisce con il contenuto corrente. Inoltre, quando si torna indietro a una vista precedentemente nascosta, lo stato (come valori dei campi di input) viene mantenuto. Per usare <Activity>, importatelo da React (import { Activity } from 'react';) e incorporatelo nel render dove serve nascondere mostre parti di UI.

useEffectEvent: separare le “funcionalità evento” dagli effetti

Lo Hook useEffectEvent è pensato per semplificare un caso comune: quando un effetto (useEffect) crea una connessione o iscrizione a un evento esterno, spesso serve gestire separatamente l’evento senza far ricascare tutto l’effetto sui cambiamenti di ogni variabile di contesto. Per esempio, immaginiamo di avere un effetto che crea una connessione a una chat:

useEffect(() => {
  const connection = createConnection(serverUrl, roomId);
  connection.on('connected', () => {
    showNotification('Connesso!', theme);
  });
  connection.connect();
  return () => connection.disconnect();
}, [roomId, theme]);

In questo codice, come descritto dal team React, se cambia il theme anche il roomId, l’effetto si riattiverà ripristinando la connessione. Spesso però non vogliamo che modifiche all’aspetto grafico (come il tema) causino un nuovo collegamento al server. Tradizionalmente molti sviluppatori disabilitavano il warning del linter e omettevano theme dalle dipendenze, ma questo può portare a bug.

Con useEffectEvent si può separare la logica dell’evento da quella dell’effetto. Ad esempio:

function ChatRoom({ roomId, theme }) {
  // Definiamo l’handler dell’evento “connected” come Event Effect
  const onConnected = useEffectEvent(() => {
    showNotification('Connesso!', theme);
  });

  // Effetto che crea la connessione al cambio di roomId
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.on('connected', () => {
      onConnected(); // usa la funzione Event Effect
    });
    connection.connect();
    return () => connection.disconnect();
  }, [roomId]); // notiamo che 'theme' non è più in dipendenza
}

In questo modo onConnected – gestito da useEffectEvent – “vede” sempre i valori aggiornati di theme, ma non causa il riesecuzione dell’effetto quando il tema cambia. Come sottolineato nella documentazione, gli “Effect Events” così definiti devono essere dichiarati nello stesso componente dell’effetto e non vanno inseriti nella dependency array (il linter aggiornato li riconosce e non chiede di aggiungerli). È quindi importante aggiornare anche eslint-plugin-react-hooks alla versione 6.1.1 (o successiva) per evitare warning errati.

cacheSignal: controllo della cache nelle Server Components

Il nuovo hook cacheSignal è destinato alle React Server Components e permette di sapere quando la durata di una cache creata con cache() è terminata. Questo è utile per annullare (abort) o pulire lavoro asincrono non più utile. Ad esempio, utilizzando il fetching deduplicato di dati:

import { cache, cacheSignal } from 'react';

const fetchUser = cache((url) => fetch(url).then(res => res.json()));

async function UserComponent() {
  const user = await fetchUser('/api/user', { signal: cacheSignal() });
  return <pre>{JSON.stringify(user)}</pre>;
}

Qui cacheSignal() genera un segnale legato alla cache. Quando React stabilisce che il risultato non sarà più usato (perché la renderizzazione è stata completata, interrotta o fallita), il segnale può essere usato per interrompere una fetch in corso. In pratica, cacheSignal permette di evitare lavoro inutile sul server quando i dati non servono più, liberando risorse.

Performance Tracks per DevTools – Novità React 19.2

React 19.2 aggiunge nuovi Performance Tracks personalizzati nelle DevTools di Chrome, pensati per offrire informazioni dettagliate sul comportamento dell’app. Ad esempio, ci sono tracce dedicate al Scheduler (che mostrano cosa React sta lavorando e con quale priorità, utility per capire come React suddivide gli aggiornamenti) e ai Componenti (che mostrano i componenti che vengono renderizzati o aggiornati, con etichette per “Mount”, “Blocked”, ecc.). Questi strumenti non richiedono modifiche al codice, ma offrono una visibilità in più durante il profiling: si possono vedere chiaramente gli intervalli temporali in cui React esegue rendering, effettua commit e gestisce aggiornamenti a diverse priorità. Per maggiori dettagli, la documentazione ufficiale sul Performance Track è disponibile sul sito React

Pre-rendering parziale – Novità React 19.2

Tra le novità di React DOM in 19.2 c’è il Partial Pre-rendering, una funzionalità avanzata per il rendering sul server. Questa tecnica permette di pre-renderizzare parti statiche di un’applicazione e riprendere il rendering successivamente per completare le parti dinamiche. In pratica, si può chiamare la nuova API prerender() per ottenere un “prelude” (shell iniziale) e uno stato “postponed” da salvare:

const controller = new AbortController();
const { prelude, postponed } = await prerender(<App />, { signal: controller.signal });

// Salviamo 'postponed' (ad esempio in un database o file) per riprenderlo dopo.
// Inviamo 'prelude' al client (ad es. tramite CDN).

In un secondo momento, al momento della vera richiesta dell’utente, si recupera lo stato salvato e si riprende il rendering con resume() o resumeAndPrerender(). Ad esempio:

const postponed = await getPostponedState(request);
const resumeStream = await resume(<App />, postponed);
// Scriviamo il flusso di rendering sul client (pipeable stream)

Oppure, per il prerendering statico (SSG):

const postponedState = await getPostponedState(request);
const { prelude: fullHtml } = await resumeAndPrerender(<App />, postponedState);
// 'fullHtml' è l'HTML completo pronto per il CDN

Queste API consentono di caricare da CDN la parte statica di un’app e completare lato server con contenuto dinamico solo se necessario. È un’ottima strategia per ottimizzare il TTFB (time-to-first-byte) e l’interattività iniziale, specialmente per grandi applicazioni isomorfiche. Per maggiori dettagli si rimanda alle [documentazioni delle API prerender e resume][16†L269-L277][16†L284-L293].

Aggiornamenti SSR e strumenti di linting – Novità React 19.2

Oltre alle feature sopra, React 19.2 risolve alcuni problemi e introduce altri miglioramenti:

• Batching di Suspense in SSR: quando si usa il rendering in streaming con ReactDOM, i boundary di Suspense ora vengono “sbloccati” (revealed) insieme in batch per un breve periodo. In passato, durante lo streaming, i contenuti sospesi potevano apparire uno per volta, creando possibili effetti di caricamento a cascata. Con 19.2, React accumula il rilascio dei contenuti sospesi affinché vengano mostrati tutti insieme, allineandosi al comportamento del rendering sul client. Questo non solo migliora l’esperienza visiva (evitando ripetute comparsa di placeholder), ma prepara anche il terreno per nuove funzionalità come le View Transitions durante il rendering SSR. Da notare che React mantiene comunque un’attenzione alle metriche web: se il caricamento della pagina dovesse superare valori soglia (ad esempio LCP > 2.5s), React interrompe il batching e mostra subito il contenuto per non penalizzare il core web vital.
• Supporto Web Streams in Node.js: React 19.2 rende disponibili le API renderToReadableStream, prerender e i nuovi metodi resume anche in ambiente Node.js. Questo significa che si può usare lo streaming basato su Web Streams in un server Node, oltre alle tradizionali pipe. Tuttavia, come avvisa il team, nelle applicazioni Node è consigliabile continuare a utilizzare le API basate su Node Streams (come renderToPipeableStream) perché sono più veloci e supportano la compressione out-of-the-box.
• eslint-plugin-react-hooks v6: il plugin ufficiale per le regole dei React Hooks è stato aggiornato alla versione 6.1.1. La configurazione di default adesso usa flat config, ma per retrocompatibilità si può usare plugin:react-hooks/recommended-legacy. Questo assicura che gli sviluppatori possano ricevere warning e suggerimenti aggiornati per i nuovi Hook come useEffectEvent (il plugin v6 li gestisce correttamente). Si raccomanda quindi di aggiornare il plugin del linting quando si passa a React 19.2.
• Prefisso useId aggiornato: l’hook useId() ora genera ID con prefisso _r_ anziché :r: o «r». Questo permette di utilizzare gli ID anche nelle View Transitions e in altri contesti (ad es. nomi XML) dove caratteri speciali non sarebbero validi. In pratica, chi già usava useId in React 19.0/19.1 noterà solo un cambiamento nel prefisso generato; il codice utente non dovrebbe rompersi, ma è utile esserne consapevoli in caso di selettori CSS particolari.

Come implementare le novità in app esistenti

Per sfruttare React 19.2 nelle proprie applicazioni già avviate, è necessario innanzitutto aggiornare le dipendenze e l’ambiente di sviluppo. I passi principali sono:

1. Aggiornare React e ReactDOM. Nel file package.json impostare le versioni di react e react-dom al minor ^19.2.0, quindi eseguire npm install. Ad esempio: { "dependencies": { "react": "^19.2.0", "react-dom": "^19.2.0" } } (Questa procedura installa React 19.2 o superiore, garantendo l’ultima versione disponibile.)
2. Aggiornare strumenti di linting e TypeScript. Se usate TypeScript, aggiornate anche i type definitions: @types/react@^19.2.0 e @types/react-dom@^19.2.0. Aggiornate inoltre eslint-plugin-react-hooks alla versione 6.x (ad es. npm install eslint-plugin-react-hooks@latest) per supportare i nuovi hook come useEffectEvent. Se servissero, modificate la configurazione del plugin (usando recommended-legacy come mostrato sopra) per mantenere la compatibilità.
3. Importare nuove API dove servono. Le nuove funzionalità si usano importandole da React o ReactDOM. Ad esempio, per usare <Activity>: import { Activity } from 'react'; function App() { const [show, setShow] = useState(false); return ( <div> <button onClick={() => setShow(v => !v)}> {show ? 'Nascondi' : 'Mostra'} Pagina </button> <Activity mode={show ? 'visible' : 'hidden'}> <Page /> </Activity> </div> ); } Similarmente, useEffectEvent si importa con import { useEffectEvent } from 'react'; e cacheSignal con import { cache, cacheSignal } from 'react';. Per il pre-rendering, le nuove API (prerender, resume, resumeAndPrerender) si trovano in react-dom/server o react-dom/static.
4. Testare Suspense e SSR. Se l’app usa Suspense o il rendering sul server, verificate che tutto funzioni correttamente con i nuovi comportamenti. Grazie al batching dei boundary, potreste notare miglioramenti nei caricamenti, ma accertatevi di non fare affidamento su un’esecuzione sequenziale degli effetti di suspence. In generale, i cambiamenti dovrebbero essere retrocompatibili, ma è bene fare un testing completo.
5. Sfruttare le nuove tracce di performance. Una volta in esecuzione con React 19.2, provate a fare il profiling con Chrome DevTools: troverete le tracce custom del React Profiler (Scheduler, Componenti) che aiutano a individuare colli di bottiglia nelle priorità degli aggiornamenti. Anche se non è necessario modificare il codice per vederle, è utile sapere che esistono e come interpretarle.

Seguendo questi passi l’aggiornamento a React 19.2 può essere fluido. Se l’applicazione è già sulla serie 19.x, di solito si tratta di aggiornare e riprovare: come sempre, fate attenzione a eventuali warning in console e tenete d’occhio il comportamento di effetti complessi o librerie di terze parti. In alcuni casi potreste dover applicare codemod o sostituire API deprecate (vedi [React 19 Upgrade Guide][10†L63-L71]), ma in generale React 19.2 è pensato per essere una release di “polishing”, non un grande stravolgimento di paradigmi.

Pro e contro di React 19.2

Punti di forza: React 19.2 porta miglioramenti tangibili in termini di prestazioni e affidabilità. Le nuove funzionalità come <Activity> e useEffectEvent rendono il codice più efficiente: <Activity> aiuta a ridurre il lavoro del renderer nascondendo parti non visibili senza smontarle completamente, mentre useEffectEvent evita ricollegamenti ridondanti in effetti complessi. L’ottimizzazione interna del compiler e le Performance Tracks consentono di scrivere app più veloci e di capire meglio cosa succede sotto il cofano. Inoltre, il supporto avanzato per il pre-rendering parziale e le ottimizzazioni di Suspense lato server promettono pagine iniziali più rapide, soprattutto per applicazioni con render sul server. La documentazione ufficiale sottolinea come “React 19.2 non sia una rivoluzione epocale, ma un abbellimento razionale” (glossario del blog ufficiale), che rende le app più veloci e il codice più corretto.

Punti di debolezza e considerazioni: Ogni nuova versione introduce anche sfide. Alcune feature avanzate (ad es. cacheSignal) sono utili solo se si usano le Server Components; chi non usa RSC può ignorarle. Bisogna fare attenzione alle breaking change minori: ad esempio il nuovo prefisso di useId potrebbe impattare se l’app si basava sui vecchi ID CSS. Anche se React 19.2 cerca di mantenere la retrocompatibilità, è sempre possibile dover aggiornare librerie di terze parti non ancora pronte per le ultime API. Un altro aspetto è la curva di apprendimento: funzionalità come <Activity> o il pre-rendering parziale aggiungono concetti nuovi che il team di sviluppo deve studiare prima di usare efficacemente. Infine, come osserva il community blog JavaScript in Plain English, “qualcosa si romperà sicuramente” quando si aggiornano grandi librerie: è quindi importante avere buone pratiche di testing e rollback in caso di regressioni.

In sintesi, i benefici di React 19.2 – miglior rendering, strumenti di debug evoluti, API più robuste – sono concreti, ma richiedono di dedicare tempo all’aggiornamento dell’ambiente e al training degli sviluppatori.

Come migrare i progetti a React 19.2

Per migrare progetti esistenti a React 19.2 consigliamo di seguire questi passi:

1. Backup e controllo versione. Prima di ogni grande upgrade, assicuratevi di avere un punto di ritorno (ad es. una branch separata o un backup).
2. Aggiornare dipendenze principali. Modificate il package.json come detto sopra e reinstallate: ad es. npm install o yarn.
3. Verificare il nuovo JSX transform (se necessario). Se l’app è molto datata, assicuratevi che stia usando il nuovo JSX transform (React 17+ ne è già dotato di default, ma è bene controllare).
4. Aggiornare codici e dipendenze aggiuntive. Per esempio, se usate librerie specifiche (router, state management, UI kits), verificate che supportino React 19. Potrebbe essere necessario aggiornare anche librerie correlate (es. testing, renderer alternativi, ecc.).
5. Modificare codice dove serve. Se usate useEffectEvent, importatelo dove serve. Se usate Suspense SSR, verificate i nuovi comportamenti di batching. Aggiornate la configurazione di eslint per le nuove regole del plugin.
6. Test, test, test. Eseguite test automatici (se presenti) e manuali per assicurare che il comportamento dell’app non sia cambiato. Controllate le console per warning nuovi, specialmente quelli legati a hook o a useId.
7. Rilascio graduale. Se possibile, fate un deploy in ambiente di staging o beta per raccogliere feedback prima del lancio in produzione.

Questa guida di migrazione non sostituisce i singoli casi pratici, ma copre i punti generali. Ricordate che ogni app è diversa: potrebbe bastare un semplice npm update, oppure potrebbe richiedere più lavoro. Per una panoramica completa dei cambiamenti in React 19 si può vedere la [React 19 Upgrade Guide][10†L63-L71], che però si applica principalmente alla transizione da React 18 a 19. Per 19.2 le modifiche strutturali sono minime, focalizzate su nuove API e bugfix (vedi le [note di rilascio ufficiali][14†L30-L34][16†L430-L434]).

Consigli per neofiti e sviluppatori esperti

• Se sei neofita di React: prendere familiarità con le basi di React (componenti funzionali, JSX, hook come useState e useEffect) è essenziale. Dopo aver capito questi concetti, puoi approcciare React 19.2 come un’evoluzione. Il nuovo <Activity> e useEffectEvent sono concetti avanzati: consigliamo di studiarli dopo aver collaudato una certa dimestichezza con gli hook standard. Risorse ufficiali come la [documentazione React][14†L54-L63] e tutorial aggiornati possono aiutare. Inoltre, approfitta di corsi professionali che trattano le ultime versioni (vedi call-to-action sotto) per una formazione guidata.
• Se sei sviluppatore già esperto con React: potresti cominciare subito a sperimentare le nuove API in progetti di prova. Inizia aggiornando un progetto demo a 19.2 per esplorare <Activity>, il batch di Suspense e gli strumenti di profiling. Verifica anche come i miglioramenti del compiler si riflettono sul bundle e sul rendering. Ricorda di aggiornare il tuo ESLint e di aggiungere i nuovi hook nel flusso di lavoro. Potresti anche partecipare alla community (ad esempio forum o GitHub) per scoprire trucchi d’uso avanzati. Per progetti aziendali, pianifica un periodo di testing approfondito: anche se 19.2 è una minor release, prudenza e un buon piano di rollout sono sempre consigliati.

In entrambi i casi, la chiave è non subire il cambiamento, ma pianificarlo. Leggere la documentazione ufficiale e seguire best practice (code review, CI/CD, testing) renderà la transizione a React 19.2 più sicura.

Conclusioni: formazione e Novità React 19.2

L’introduzione di React 19.2 dimostra quanto sia fondamentale investire nella formazione continua di un team IT. Nuove tecnologie e versioni frequenti richiedono sviluppatori preparati e aggiornati. Solo così i progetti software possono raggiungere il successo nei tempi previsti, evitando ritardi dovuti a learning curve impreviste. Un team ben formato è motivato e si sente valorizzato, fattori che si riflettono positivamente sulla qualità del lavoro.

Per questo motivo, consigliamo alle aziende e ai team di sviluppo di considerare percorsi formativi dedicati a React. Ad esempio, Innovaformazione offre un corso ReactJS rivolto alle aziende, disponibile sia online (in modalità aula virtuale) sia in sede, con calendario personalizzabile. Grazie ai fondi interprofessionali (come Fondimpresa), è possibile ottenere il corso gratis o a costo ridotto. Un corso dedicato permette ai vostri sviluppatori di apprendere le novità di React 19.2 – e le versioni precedenti – in modo strutturato, guidato da esperti del settore, accelerando la curva di apprendimento e massimizzando il ritorno sugli investimenti.

Scopri di più sul corso ReactJS di Innovaformazione qui: Corso ReactJS – Innovaformazione.

Investire nella formazione del personale non è un costo, ma un investimento strategico: team preparati consegnano progetti migliori, nei tempi stabiliti, e con maggiore soddisfazione professionale.

(fonte) (fonte) (fonte)

INFO: info@innovaformazione.net – TEL. 3471012275 (Dario Carrassi)