React 19 e Suspense, il tag della discordia

Suspense è un nuovo tag introdotto con React 19 che permette di mostrare un fallback mentre il contenuto atteso è ancora in fase di caricamento. Fin qui tutto bene se non fosse che dopo la sua comparsa, e parziale revisione, tale feature è stata al centro diverse polemiche e proteste. Contrarietà dovute in particolare al suo impatto negativo sulle performance e talmente accese da costringere gli sviluppatori del framework a ritardare il rilascio della nuova versione.

A cosa serve Suspense di React 19

Il tag può essere utilizzato per mostrare del "contenuto di riserva" fino a quando i dati delimitati non vengono recuperati dal server che li ospita. Per spiegare questa dinamica si può fare riferimento ad un componente Classe momentaneamente sospeso mentre l'applicazione recupera la lista degli alunni. Fino a quando non è pronto per il rendering, React si limita a mostrare il fallback, cioè il componente di Loading. Successivamente, quando i dati sono stati caricati, il framework nasconde il fallback di caricamento e restituisce il componente Classe con i dati.

<Suspense fallback={<Loading />}>
   <Classe alunniId={alunni.id} />
< /Suspense>

Le ragioni del rinvio

Inizialmente i responsabili del progetto avevano stabilito che in presenza di più task associati al medesimo Suspense i recuperi sarebbero dovuti avvenire in contemporanea. Tale implementazione venne poi esclusa dal core ipotizzando delle soluzioni alternative per le gestione di più recuperi in parallelo, ad esempio i route loader. Questo per via della necessità di liberare lo stack nel momento stesso di una sospensione e con l'obbiettivo di sbloccare lo stato di caricamento.

La conseguenza del cambio di rotta è stata però una pull request con ben 190 voti contrari e appena 10 pareri favorevoli.

📚 What a week this has been. I still have no voice because I had to tell this story a hundred times at #ReactSummit 😅. So here's my summary of the React 19 suspense saga: https://t.co/7PyehpH2Nt

— Dominik 🔮 (@TkDodo) June 16, 2024

A sostenere le ragioni degli sviluppatori di React vi è anche il fatto che il framework non preserva alcuno stato per i render che vengono sospesi. Questo significa che quando un componente è stato caricato, React riproverà comunque a renderizzare il contenuto sospeso da zero. L'utenza, non senza una ragione, appare però più interessata ai possibili rallentamenti a danno delle applicazioni. Per questo motivo React 19, attualmente in fase di Release Candidate, richiederà un periodo più lungo prima del suo rilascio.