React 19: un passo avanti per le prestazioni e la developer experience

React è una delle librerie JavaScript più popolari per lo sviluppo di applicazioni mobile e web: la sua caratteristica principale è la possibilità di creare componenti riutilizzabili per costruire interfacce utente complesse.

Prendendo in considerazione i dati dello “StackOverflow Survey” del 2023, il 42% dei web developer ha dichiarato di utilizzare React per lo sviluppo delle proprie app.

Questo dato rende React la libreria per la realizzazione di interfacce utente più utilizzata, superando di gran lunga i suoi diretti competitors quali Angular, Vue e Svelte.

È stata creata e viene tuttora periodicamente aggiornata da Meta (ex Facebook) e da una comunità di sviluppatori indipendenti e aziende, mantenendo la sua licenza open-source.

L’evoluzione di React nel tempo

La prima versione di React è stata pubblicata nel lontano Maggio 2013; da quel momento la sua popolarità è sempre stata in ascesa, si sono quindi resi necessari diversi bug fixing e aggiornamenti dedicati a migliorare la libreria e a mantenerla al passo coi tempi.

La release più degna di nota è stata quella del Febbraio 2019, in cui sono stati aggiunti gli hooks che hanno semplificato la struttura dei componenti fornendo un miglior approccio per la condivisione della logica stateful.

Questo update ha anche reso più semplice l'apprendimento di React andando con il tempo a sostituire alcuni concetti preesistenti come l'utilizzo delle classi e alcuni metodi legati al lifecycle dei componenti.

Un paio di mesi fa a Henderson, in Nevada, si è tenuta la React Conf 2024, uno dei maggiori eventi dedicati a questa tecnologia.

Durante il primo giorno della conferenza, in un clima di grande impazienza e attesa, è stata mostrata un'anteprima della versione 19 di React, che attualmente si trova in “Release Candidate” status.

React Compiler

La nuova versione di React è basata su un nuovo React Compiler che automatizzerà alcune ottimizzazioni rendendo più semplice la build e lo sviluppo delle app eliminando la necessità di dover fare diverse ottimizzazioni manualmente tramite l’impiego di APIs come “useCallback”,  “useMemo” e “React.memo”.

Le action

Una delle novità introdotte sono le action, che aiuteranno i developer a gestire tutti quei casi in cui è necessario effettuare operazioni asincrone per poi aggiornare la UI di un componente.

Un esempio perfetto è il submit di una form.

Questi casi vengono oggi solitamente gestiti utilizzando l’hook setState al termine di una funzione asincrona.

Con la nuova versione sarà possibile fare affidamento su nuovi hooks quali “useTransition”, “useActionState”, “useFormStatus”, “useOptimistic”, “use”.

“useOptimistic” permette di effettuare un aggiornamento immediato della UI anche se una action è ancora in corso.

Nell’esempio mostrato di seguito si vuole aggiornare un valore per mezzo di una request asincrona. Si andrà quindi a valorizzare “optimisticName” prima di chiamare il metodo asincrono in modo da mostrare il suo valore immediatamente, ragionando in modo ottimistico, dando quindi per scontato che l’operazione asincrona avrà esito positivo.

Al termine della chiamata asincrona il valore di “optimisticName” diventerà quello di “currentName”, ovvero il valore reale basato sull’esito della nostra richiesta.

function ChangeName({currentName, onUpdateName}) {

 const [optimisticName, setOptimisticName] = useOptimistic(currentName);

 const submitAction = async formData => {

   const newName = formData.get("name");

   setOptimisticName(newName);

   const updatedName = await updateName(newName);

   onUpdateName(updatedName);

 };

 return (<form action={submitAction}>

     <p>Your name is: {optimisticName}</p>

     <p>

       <label>Change Name:</label>

       <input

         type="text"

         name="name"

         disabled={currentName !== optimisticName}

       />

     </p>

   </form>

 );

}

Server Components

Già presenti nella versione Canary e già integrati in NextJS, i Server Components faranno ora ufficialmente parte di React. Questo tipo di componenti utilizza il meccanismo dell’hydration, che il creatore di React, Dan Abramov, ha sintetizzato con queste parole:

“Hydration is like watering the “dry” HTML with the “water” of interactivity and event handlers.”.

Sostanzialmente il server si occupa di generare l’HTML iniziale in modo che l’utente non debba aspettare il caricamento e il parsing del bundle JS, di seguito React lato client si occuperà di gestire l’interattività.

Altre ottimizzazioni

Condivisione delle Ref semplificata

Le refs permettono di accedere in modo diretto a un nodo del DOM senza causare dei re-render. 

Per passare una ref da un componente all’altro attualmente è necessario wrappare il componente di cui si vuole esporre un nodo del DOM con la funzione “forwardRef”.

Di seguito un esempio dell’implementazione attuale:

function FormComponent() {

 const ref = useRef(null);

 function handleClick() {

   ref.current.focus();

 }

 return (

   <form>

     <InputComponent ref={ref} />

   </form>

 );

}

import { forwardRef } from 'react';

const InputComponent = forwardRef(function MyInput(props, ref) {

 return (

<input ref={ref} />

 );

});

Nella versione 19 condividere una ref tra due componenti sarà molto più semplice visto che è possibile accedere direttamente alla ref passata come props, senza quindi l’impiego di “forwardRef” che verrà deprecato in futuro.

function InputComponent({ref}) {

 return (

<input ref={ref} />

 );

};

Nella nuova versione sarà anche possibile ritornare una funzione di cleanup che verrà eseguita quando il nodo in questione viene rimosso dal DOM.

<Context> come provider 

Per utilizzare un Context come provider ora è necessario ricorrere a Context.Provider.

Con la nuova versione non sarà più necessario perché il Context potrà essere usato direttamente come provider.

const ThemeContext = createContext('');

function App({children}) {

 return (

   <ThemeContext value="dark">

     {children}

   </ThemeContext>

 ); 

}

Supporto ai metadata

Dalla versione 19 sarà possibile inserire metadata come “<title>” e “<description>” in qualunque punto dell’applicazione, si occuperà poi React di incorporare questi tag nella sezione <head> della nostra applicazione.

Non sarà quindi più necessario ricorrere a librerie esterne come “react-helmet” per gestire i metadata.

Gestione degli stylesheet

Sarà possibile avere controllo sull’ordine in cui vengono caricati gli stylesheets utilizzando la parola chiave “precedence”.

React si occuperà anche di controllare, nel caso di fogli di stile caricati esternamente, che essi vengano caricati prima di mostrare il contenuto che li utilizza.

<link rel="stylesheet" href="foo" precedence="default" />

<link rel="stylesheet" href="bar" precedence="high" />

Supporto script asincroni

Sarà possibile includere script JavaScript in qualunque punto dell’app, in modo da poterli includere direttamente nel componente in cui vengono utilizzati ed evitare possibili duplicazioni di essi.

Supporto preloading risorse

React 19 ha incluso un nuovo set di API per il caricamento e precaricamento delle risorse in modo da ottimizzare il caricamento iniziale delle pagine. 

Migliore gestione degli errori

La visualizzazione degli errori è stata ottimizzata in modo da evitare duplicati.

Supporto ai Custom Elements

Come mostrato su “CustomElementsEverywhere” il supporto ai Web Components della versione corrente (18.3.1) è al 67%. Nella nuova versione il supporto sarà completo al pari di altre note librerie come Vue e Angular.

Conclusione

La nuova versione porta con sé aggiornamenti importanti senza sconvolgere nessuno dei capisaldi a cui gli sviluppatori React sono affezionati.

L’attenzione è stata particolarmente rivolta alle prestazioni, all'esperienza degli sviluppatori e all'accessibilità.

Aggiornare a React 19 dovrebbe essere abbastanza semplice, ma è comunque necessario prestare attenzione alle potenziali breaking changes.

Sulla documentazione ufficiale di React è già disponibile la guida per eseguire l’aggiornamento.

Fonti:

https://it.wikipedia.org/wiki/React_(web_framework)
https://react.dev/blog/2024/04/25/react-19