Nel post precedente abbiamo visto come React 18 mette a disposizione per tutte le chiamate che aggiornano lo state la gestione in batching. In questo modo vengono ottimizzati gli aggiornamenti dello stato ed il render nella UI.
Durante l’esecuzione del codice lato frontend, può accadere che la UI rimanga bloccata, ad esempio durante lo scaricamento di molti dati dal backend. In questo caso l’applicazione può risultare bloccata e non consentire all’utente di effettuare altre operazioni.
In questo caso, potrebbe risultare utile poter assegnare priorità alle esecuzioni.
React mette a disposizione l’api startTransition() che consente di assegnare una bassa priorità a certi aggiornamenti. Pensiamo ad esempio ad uno scaricamento (magari solo la prima volta) di un elenco di valori da un’ API, e la possibilità di interagire con una textbox nel mentre.
Sicuramente lo scaricamento dei dati dovrebbe avere un priorità minore rispetto alla possibilità di verificare lo stato della textbox. In pratica, utilizzando startTransition() stiamo dicendo a React che questo particolare aggiornamento può attendere se ci sono degli aggiornamenti piu importanti.
Solitamente startTransition() si utilizza quando si deve interagire con qualcosa che esegure un lavoro molto lungo di rendering ed in generare tutto quello che non richiede un feedback immediato all’utente nella UI.
Prima dell’introduzione di startTransition() era possibile definire priorità utilizzando setTimeout() . Lo svantaggio di questo approccio è che React non ha nessun modo per tenere traccia dei cambiamenti di stato che possono avvenire durante il render. Utilizznado invece startTransition(), React può interrompere il render per richiamare la funzione ad ogni cambiamento di stato.
In uno dei prossimi post vedremo un esempio pratico di utilizzo di startTransition().