Aggiornamento React 19

React 19

A dicembre 2024 è stato rilasciato React 19 con una serie di novità ma la principale riguarda l’introduzione dei React Server Components che permettono un’esecuzione ibrida del codice tra il server e il client. Questa non è solo una nuova funzionalità ma un nuovo pattern che richiedere di pensare le applicazioni in modo completamente diverso (e più complesso - vedi paragrafo dedicato sotto).

Cos’è cambiato nel codice

Le funzionalità di React descritte nel libro sono stabili e quindi non hanno subito cambiamenti nella nuova versione rilasciata. Sempre per questo motivo, l’aggiornamento a React 19 ha richiesto delle modifiche solo alle dipendenze usate e alle poche righe di codice legate a queste dipendenze. Quindi, sostanzialmente nulla di rilevante. Di seguito sono elencate alcune di queste modifiche ma, se volete, potete vederle tutte in dettaglio attraverso questo commit.

La versione aggiornata del codice si trova nel branch react-19-vite del repository ufficiale. Questo è il nuovo branch di default.

Aggiornamento delle dipendenze

Le modifiche principali riguardano le dipendenze con l’aggiornamento di react alla versione 19.

Vite 6

Tra le dipendenze di sviluppo l’aggiornamento principale riguarda Vite che ha raggiunto la versione 6.

Vite era stato introdotto dopo la pubblicazione del libro a luglio 2023. In questo post trovate tutte le spiegazioni per adattare il progetto.

Anche il loader di file SVG vite-plugin-svgr è stato aggiornato. Il caricamento di immagini SVG come componenti React è cambiato e non è più necessario usare il codice:

import { ReactComponent as InfoIcon } from "bootstrap-icons/icons/info.svg";

Ora basta scrivere il più conciso:

import InfoIcon from "bootstrap-icons/icons/info.svg?react";

URL aggiornati

Il servizio utilizzato per inserire immagini placeholder non è più attivo:

const defaultImage = "https://via.placeholder.com/32x32.png";

Quindi è stato rimpiazzato con un altro attivo:

const defaultImage = "https://placehold.co/32x32.png";

Create React App e Vite

A luglio 2023 era già stato pubblicato un aggiornamento con le spiegazione per convertire il progetto da Create React App a Vite. Perché allora c’è un altro paragrafo dedicato a CRA?

Perché nell’agosto 2023 era stato poi pubblicato un altro aggiornamento su un rilascio di CRA aggiornato ma si è dimostrato un fuoco di paglia.

Da quel momento in poi Create React App è diventato uno zombie: deprecato ma solo per quelli che lo sapevano. Infatti, se da una parte la documentazione di React non lo menzionava più esplicitamente, dall’altra non c’era nessuna nota che ne scoraggiasse l’uso. E così, ancora oggi, chi cerca “new react app” si ritrova tra i primi risultati Create React App e finisce poi nel segnalare i problemi che incontra perché non funziona in modo adeguato…

Pochi giorni fa però, Mark Erikson (il maintainer di Redux) ha chiesto ai “maintainer” di CRA di inserire un avvertimento sul sito del progetto e in tutti gli strumenti correlati. Lo ha fatto in questa lunga issue dove ne ha spiegato i motivi e tutti i dettagli necessari per risolvere questa situazione.

Tra i passi necessari c’è quello di segnalare Vite come alternativa a Create React App perché al momento vengono suggeriti solo strumenti come Next.js (i cosiddetti “production-grade React framework”) che però fanno molto di più di quello che serve alla maggior parte delle persone che vogliono realizzare delle Single Page Application solo client.

React Server Components

Il motivo per cui la documentazione di React spinge gli sviluppatori verso l’utilizzo di strumenti come Next.js è noto a tutti ma non è sempre la scelta migliore.

Per usare i famosi React Server Components è necessario usare Next.js o simili e strutturare l’applicazione secondo una logica diversa da quella delle SPA.

L’introduzione dei RSC ha di fatto portato all’esistenza di due React: quello client side e quello dei RSC dove client e server si fondono. Sono, di fatto, due tecnologie distinte. Chi si avvicina oggi a React tende a tuffarsi direttamente nel mondo del secondo React ma, senza la conoscenza dei meccanismi del React originale (il primo React), il secondo diventa indomabile….

Nonostante i RSC vengano presentati come la soluzione a tutti i mali e come lo strumento definitivo per aumentare la produttività, i RSC sono tutt’altro che semplici. Prendiamo l’esempio che è stato usato per mostrare i RSC al mondo durante la demo iniziale:

import Profile from './components/profile.tsx';

export async function Page({ params: { slug } }) {
  const [rows] = await sql`SELECT * FROM user WHERE slug = ${slug}`;
  const userData = rows[0];
  return <Profile user={userData} />;
}

Lo stesso Next.js suggerisce di non usare questo approccio se non per realizzare prototipi perché molto rischioso dal punto di vista della sicurezza. Nel codice qui sopra infatti, tutti valori di userData sono inviati al client e quindi visibili: e il campo password? È anche curioso che queste spiegazioni non siano presenti nella documentazione di Next.js ma all’interno di un post sul blog del progetto..

È quindi importante documentarsi a fondo prima di scegliere come sviluppare un nuovo progetto e valutare bene pro e contro della propria scelta. Sembra ormai una questione di giorni prima che la documentazione di React torni a proporre le alternative in modo onesto e senza secondi fini a quelle che sta proponendo ormai da due anni. Quindi speriamo che le cose si mettano finalmente a posto.