Novità in React 18

Novità in React 18. React ha fatto molta strada nell’ultimo decennio, subendo trasformazioni significative che lo hanno reso uno dei framework UI front-end più utilizzati oggi.

Inizialmente, la sintassi verbosa di React rendeva difficile il lavoro degli sviluppatori. Tuttavia, React ha introdotto la sintassi JSX, semplificando la creazione di componenti. A seguire, i componenti funzionali con Hooks hanno reso più semplice la gestione dello stato e delle funzioni del ciclo di vita, portando a un codice più elegante, leggibile e manutenibile. Con l’introduzione del rendering lato server (SSR) in React 16, le prestazioni sono migliorate, consentendo tempi di caricamento iniziale delle pagine più rapidi e una migliore ottimizzazione per i motori di ricerca (SEO). Inoltre, framework full-stack come Next.js e Remix hanno reso React ancora più accessibile, aumentandone ulteriormente la popolarità.

Evoluzione di React dalla sintassi React ai framework full-stack come Next.js.
L’ultima versione della libreria, React 18, è stata rilasciata nel marzo 2022. In questo articolo, approfondiremo le sue nuove funzionalità ed esploreremo i vantaggi sia per gli utenti che per gli sviluppatori. Inoltre, esamineremo come implementare queste nuove funzionalità e discuteremo gli entusiasmanti piani che il team di React ha in serbo per il futuro del framework.

Indice dei contenuti

• Nuove funzionalità e aggiornamenti in Novità in React 18.
• Rendering concorrente in Novità in React 18.
• Il componente di React sul lato client
• Rendering sul lato server con
• Batching e transizioni automatiche in Novità in React 18.
• Nuovi hook in Novità in React 18.
• Come aggiornare le Novità in React 18.
• Riflessioni finali

Nuove funzionalità e aggiornamenti in React 18
React 17 è stata una release “trampolino di lancio”, che è servita come preparazione per le nuove funzionalità introdotte in React 18. Sebbene in React 17 non siano state apportate modifiche all’API per sviluppatori di React, è stato introdotto il modo di aggiornare in modo incrementale le versioni e la possibilità di eseguire più versioni di React all’interno di un singolo albero di componenti. Si è trattato di un passo importante verso l’implementazione delle funzioni aggiornate in React 18. Analizziamo alcune di queste caratteristiche e aggiornamenti chiave.

Un nuovo motore di rendering concorrente
React 18 ha introdotto un nuovo motore di rendering concorrente, ottimizzato sia per il front-end che per il lato server. Questo passaggio alla concorrenza ottimizza il processo di rendering dell’interfaccia utente sia sul lato server che su quello client. Di conseguenza, gli utenti possono interagire prima con la pagina, offrendo un’esperienza più fluida anche nelle pagine fortemente incentrate sui dati. Gran parte di questo è implementato come parte del componente migliorato.

Componenti lato server (Novità in React 18 )
L’uso dei componenti lato server è stato ottimizzato per facilitare il rendering e l’idratazione parziale lato server. Ciò significa che solo le parti più “leggere” dell’applicazione vengono renderizzate sul server e inviate al client, consentendo un ricaricamento immediato della pagina. Sul lato client, è stato integrato con il fetching asincrono dei dati, consentendo il completamento del fetching dei dati e il rendering delle parti più pesanti della pagina. Il risultato finale è una riduzione dei tempi di attesa e un’esperienza più fluida per gli utenti.

Un’interfaccia utente più reattiva
Il nuovo motore di rendering interrompibile consente di ridefinire le priorità di idratazione dei componenti lato server in base alle interazioni degli utenti con l’interfaccia utente. Gli utenti possono interagire con la pagina prima che l’HTML si attivi con gli eventi del browser. A seconda del punto in cui l’utente fa clic, React dà priorità a quella porzione dell’albero dei componenti, ottenendo un’interfaccia utente più rapida e reattiva.

Un processo di aggiornamento Opt-in
Una delle caratteristiche principali di React 18 è il processo di aggiornamento opt-in. Per impostazione predefinita, React 18 utilizza il motore di rendering di React 17. Il team di React ha ottenuto questo risultato introducendo nuove funzioni fondamentali nelle proprie API, pur mantenendo il supporto per quelle vecchie. Per sfruttare le nuove caratteristiche di React 18, gli sviluppatori devono utilizzare specificamente le nuove funzioni dell’API. Questo approccio consente agli sviluppatori di testare i propri componenti e di effettuare l’aggiornamento con il minimo problema, anche se sono previste modifiche di rilievo.

Rendering concorrente in React 18
Secondo il blog di React, il motore di rendering di React 18 è stato progettato per essere senza interruzioni, consentendo agli sviluppatori di concentrarsi sul codice dell’applicazione senza preoccuparsi del processo di rendering.

Nella maggior parte dei casi, le modifiche vengono apportate all’interno del motore di rendering stesso e non dovrebbero influire sul codice, con la possibile eccezione dei manutentori di librerie di terze parti.

Il precedente motore di rendering di React funzionava come un singolo processo sincrono e ininterrotto che eseguiva il rendering dell’intero albero dei componenti. Ciò significava che gli sviluppatori dovevano attendere il completamento del rendering per poter vedere le nuove modifiche. Tali modifiche venivano programmate in code di rendering successive.

Al contrario, il motore di rendering di React 18 è stato aggiornato per essere interrompibile, riprendibile e in grado di scartare e sostituire il DOM risultante. Questo aggiornamento consente un processo di rendering più flessibile ed efficiente.

È importante notare che React garantisce un rendering coerente. In termini pratici, questo significa che se si usa React senza utilizzare store esterni che richiedono la sincronizzazione, React gestirà il rendering utilizzando le sue capacità concorrenti e garantendo un rendering coerente. Se si scrive principalmente React puro usando l’hook useState, ci si può aspettare tempi di attesa minori e risultati coerenti.

L’avvertenza principale è che i manutentori delle librerie di codice gestiscono il fetching dei dati o la gestione dello stato in modo diverso, richiedendo una riscrittura del codice per evitare incongruenze. Tenendo presente questo aspetto, il team di React ha reso React 18 opt-in, consentendo agli sviluppatori di testare e aggiornare i componenti prima di adottare completamente la nuova versione.

Di seguito vediamo le nuove funzionalità che la maggior parte degli sviluppatori React probabilmente utilizzerà.

Il componente di React sul lato client
Il componente è stato introdotto in React 16.6, ma aveva una portata limitata. Funzionava solo con React.Lazy, che permetteva di sospendere i componenti in attesa del caricamento di un bundle specifico. Tuttavia, inizialmente non poteva essere utilizzato per il recupero dei dati. Questa limitazione è stata risolta nell’ultima versione di React, rendendo possibile l’uso del componente per il recupero dei dati.

In sostanza, il componente semplifica il processo asincrono di recupero dei dati e la visualizzazione del caricamento. Può essere avvolto attorno a un componente che gestisce il fetching dei dati, consentendo agli sviluppatori di visualizzare un componente di caricamento codificato in modo dichiarativo nel loro layout.

Il team React consiglia invece di utilizzare framework che hanno già integrato la logica per il recupero dei dati con Suspense, in modo da non doverla implementare da soli. Ecco un elenco parziale di framework e librerie di data fetching compatibili con React 18: Next.js, Gatsby, Relay e Apollo.

Infine, la caratteristica più interessante di <Suspense> è che supporta il rendering lato server con la stessa sintassi, rendendo più facile lo sviluppo di componenti che ottimizzano le pagine ricche di dati. Vediamo come funziona SSR con <Suspense> .

Rendering lato server con<Suspense>
Il rendering lato server è stato introdotto in React 16 ed è stato utilizzato principalmente in framework più grandi come Next.js. Uno dei principali vantaggi dell’uso di SSR è stato quello di migliorare la SEO, poiché le applicazioni React solo lato client non hanno un HTML che può essere letto dai web crawler.

Un altro caso d’uso di SSR è quello di fornire una visualizzazione più rapida del punto di ingresso dell’applicazione, inviando immediatamente l’HTML. Tuttavia, questo metodo funziona meglio per le pagine che sono per lo più statiche per fornire una buona esperienza all’utente. Quando una pagina SSR deve includere molti dati dinamici, l’esperienza dell’utente non è ottimale.

Rendering lato server prima di React 18
Prima di React 18, l’intero processo SSR (mostrato nel grafico) doveva essere completato prima che l’utente finale potesse interagire con la pagina.

Il processo di rendering sul lato server recupera i dati necessari per la visualizzazione, esegue il rendering dell’HTML e lo invia al client.

Sul lato client, i bundle JavaScript vengono caricati e l’HTML lato server viene “idratato”, il che significa che tutti i gestori di eventi del browser che rendono l’interfaccia utente interattiva sono legati all’HTML lato server. Se la pagina ha molti componenti dinamici che recuperano dati, i tempi di attesa iniziali potrebbero essere eccessivi.

Render parziali con il rendering lato server
Con React 18, è possibile utilizzare sul server per rinviare il rendering al client. I componenti sospesi vengono sempre renderizzati sul lato client, il che significa che la sintassi rimane coerente e che non è necessaria una sintassi lato server per Suspense. L’innovazione di React 18 è che il server invia un rendering parziale al client, consentendo all’utente finale di vedere e interagire con alcune sezioni della pagina immediatamente, mentre i caricatori appaiono mentre il lato client recupera e rende i dati.

Di conseguenza, gli utenti finali possono interagire con l’interfaccia utente in modo più immediato rispetto a quanto era possibile fare prima di React 18. Le porzioni statiche della pagina sono già idratate dal motore di rendering concorrente, consentendo agli utenti di cliccare sui link e persino di navigare fuori dalla pagina, interrompendo il rendering del componente avvolto .

Idratazione prioritaria
Consideriamo una pagina più complessa con due sezioni che richiedono più tempo per essere caricate a causa di un gran numero di elementi interattivi. Ad esempio, l’intestazione del sito, la barra laterale e due componenti di contenuto che si stanno idratando. Se l’utente vuole interagire con l’interfaccia utente mentre è ancora in fase di caricamento, il motore di rendering concorrente di React 18 darà priorità all’idratazione del componente su cui l’utente fa clic. Ciò significa che l’albero dei componenti diventa più interattivo prima di altri componenti.

Il motore di rendering concorrente gestisce internamente questa idratazione selettiva dei componenti, consentendo un’esperienza utente più fluida. Facendo clic su una regione specifica della pagina, il processo di idratazione viene interrotto e riprogrammato, garantendo un tempo di caricamento più rapido e un’interfaccia utente più rapidamente interattiva. Gli sviluppatori non devono preoccuparsi di come ciò avvenga, purché utilizzino la nuova API di idratazione.

La combinazione di React di SSR con il componente e la nuova funzione di idratazione interrompibile sul lato client offre chiari vantaggi che migliorano notevolmente l’esperienza dell’utente e contribuiscono all’impressione positiva complessiva che gli utenti hanno quando interagiscono con la vostra pagina web. Inoltre, questi vantaggi si sommano al mantenimento di una buona SEO, rendendo la situazione “win-win”.

Batching e transizioni automatiche nelle Novità in React 18.
Le modifiche al componente di React 18 apportano un miglioramento significativo all’interazione dell’utente finale con la vostra applicazione. Tuttavia, React 18 introduce anche altri cambiamenti progettati per accelerare ulteriormente il rendering e l’interattività delle pagine, come il batching automatico e le transizioni. Queste ottimizzazioni si concentrano sulla gestione dello stato sul lato client e possono migliorare le prestazioni di tutti i componenti interattivi. Le transizioni, in particolare, sfruttano ampiamente il motore di rendering concorrente interrompibile.

Usare le transizioni per dare priorità alle modifiche dell’interfaccia utente
Le transizioni in React offrono un nuovo modo di dare priorità alle modifiche dell’interfaccia utente. Con le transizioni è possibile distinguere tra aggiornamenti urgenti e non urgenti dell’interfaccia utente. Questa differenziazione consente di dare priorità agli aggiornamenti più critici rispetto a quelli meno urgenti.

Per sfruttare le transizioni, è necessario utilizzare il nuovo hook useTransition().

Nell’esempio di codice che segue, l’hook useTransition() restituisce un array con due valori: una variabile booleana denominata isPending, che viene impostata a true quando è in corso una transizione, e una funzione denominata startTransition, che avvia la transizione richiamando una funzione di callback.

const [isPending, startTransition] = useTransition();

Il codice inserito nella callback sarà eseguito con una priorità inferiore rispetto alle modifiche di stato effettuate al di fuori della funzione startTransition. Ciò significa che le modifiche allo stato non avvolte all’interno di startTransition avranno una priorità più alta, mentre le modifiche allo stato effettuate all’interno della callback avverranno in background.

Il rendering concorrente creato con startTransition è annullabile. Se l’utente apporta ulteriori modifiche che influiscono sulla validità del rendering, questo verrà interrotto e scartato. L’effetto complessivo delle transizioni è un’interfaccia utente più reattiva.

È essenziale comprendere il caso d’uso dei cambiamenti di stato quando si utilizza il callback startTransition. Questa funzione è pensata principalmente per la transizione da un rendering a un altro in React 18. La funzione di callback deve essere una funzione sincrona, altrimenti non funzionerà correttamente.

Nuovi hook in React 18
React 18 introduce diversi nuovi hook che mirano a migliorare le prestazioni e la robustezza delle applicazioni React. Oltre all’hook useTransition, di cui abbiamo già parlato in dettaglio, ce ne sono alcuni altri che vale la pena esplorare.

useId
L’hook useId genera ID univoci che sono stabili sia sul lato server che su quello client. È stato progettato per essere usato con componenti che richiedono ID univoci, come le sequenze di test dell’interfaccia utente che imitano le azioni dell’utente. Tuttavia, non è consigliabile creare chiavi univoche per le collezioni di rendering. Ulteriori informazioni sul gancio useID sono disponibili qui.

useDeferredValue
L’hook useDeferred ha una funzione simile a quella di useTransition ed è comunemente usato per il debouncing. A differenza del codice di debouncing tradizionale, che si basa su una quantità specifica di tempo, React aggiorna il valore non appena l’altro lavoro in coda viene completato. Per ulteriori informazioni su questo hook, è possibile consultare questa pagina.

React.StrictMode
React.StrictMode è uno strumento di sviluppo che aiuta gli sviluppatori a testare la robustezza dei loro componenti durante la transizione verso un futuro in cui il montaggio e lo smontaggio funzioneranno con uno stato riutilizzabile. Si tratta di una funzionalità disponibile solo in modalità di sviluppo.

React simula lo smontaggio e il rimontaggio dei componenti in modo che, quando lo stato riutilizzabile sarà disponibile, si potrà essere certi che i componenti funzioneranno correttamente. Ulteriori informazioni su StrictMode in React 18 sono disponibili qui.

Come aggiornare a React 18
Il rilascio di React 18 apporta numerose modifiche all’API di base sia per il rendering lato server che per il codice dell’applicazione lato client. Tuttavia, questo articolo ha trattato solo alcune delle caratteristiche più importanti. Se siete interessati all’aggiornamento a React 18, il blog React fornisce informazioni complete sull’argomento, compresa una guida all’aggiornamento.

Riflessioni finali
React 18 rappresenta una pietra miliare significativa per la libreria, con un cambiamento fondamentale nel suo funzionamento. Anche se questo cambiamento può sembrare scoraggiante, molti degli aggiornamenti sono ottimizzazioni che avvengono automaticamente, senza richiedere modifiche al codice.

Ma questo è solo l’inizio. Il team di React ha in programma di rilasciare una nuova versione del componente , che consentirà agli sviluppatori di preparare schermate dell’interfaccia utente in background e di mantenere lo stato attuale del componente quando viene smontato e rimontato. Inoltre, sono attualmente in fase di sviluppo i componenti Server, che combineranno le caratteristiche di con funzionalità lato server.

Gli sviluppatori possono guardare con fiducia alle molte nuove funzionalità che React e le librerie di terze parti introdurranno nei prossimi anni. Anche se alcuni cambiamenti possono sembrare difficili da capire all’inizio, possiamo fidarci della visione che il team di React ha per il futuro.
Se vi state chiedendo se sia il caso di passare a React 18, la nostra risposta è un secco sì. Non si tratta solo di una major release, ma di una svolta epocale e il team di React ha lavorato molto per rendere la transizione il più agevole possibile. Aggiornando a React 18, potrete sfruttare le nuove funzionalità a cui il team React sta lavorando per il futuro.

(fonte)

Innovaformazione, scuola informatica specialistica promuove l’aggiornamento fra le community di sviluppatori. Nell’offerta formativa rivolta alle aziende trovate il Corso React .

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