React 19: un compilatore per le performance

React 19, prossima release del noto framework JavaScript per la realizzazione di interfacce utente, è in procinto di essere rilasciato dopo un'attesa di 2 anni da marzo 2022, mese in cui venne lanciata la versione 18 del progetto. Questo aggiornamento conterrà diverse novità interessanti ma quella su cui vogliamo concentrare la nostra analisi è probabilmente la più importante. Si tratta infatti di un compilatore. Grazie ad esso non sarà più necessario utilizzare hook come useMemo e useCallback per ottenere codice ottimizzato.

React: compilazione e ottimizzazione delle performance

Attualmente il compilatore di React non è più un progetto in fase di ricerca ed è stato già adottato dagli sviluppatori di Meta. Per la versione Web di Instagram. Il vantaggio di questa funzionalità risiede nel fatto che essa gestirà automaticamente la memorizzazione, con un vantaggio per le prestazioni. Fino ad ora questa operazione doveva essere implementata manualmente, nello specifico per quanto riguarda il re-rendering dei cambiamenti di stato.

Come sottolineato dagli sviluppatori del framework, l'ottimizzazione rappresenta una vera e propria sfida quando si realizzano applicazioni in JavaScript. Di fatto React nasce proprio per questo, cioè per semplificare le sessioni di coding, e il compilatore è in grado di generare codice sicuro tenendo conto sia delle regole del linguaggio che di quelle del framework.

The React team dropped a lot of news about React 19, confirming that it will be the next release (no minor version for sure!). react-strict-dom is some new hotness this month, and Apple tried to kill PWAs but got beat back. Read the transcript or listen: https://t.co/QGXKvq6hgU

— Carl @ Reactiflux (@vcarl_) March 4, 2024

A questo proposito è stato presentato l'esempio dei componenti che restituiscono lo stesso valore dati gli stessi input, sono quindi indepotenti, senza modificare i valori dello stato. Fin qui tutto bene se non fosse che regole di questo tipo limitano ciò che gli sviluppatori possono fare a livello di ottimizzazione.

Il compilatore e le regole

Il compilatore di React è stato realizzato in modo da rilevare i casi in cui le regole del framework non vengono rispettate. Se il codice viene considerato sicuro, allora si procede con la compilazione. Diversamente questa fase viene bypassata. Le soluzioni per garantire la conformità del codice sono comunque già disponibili, per esempio abilitando lo Strict Mode e tramite il plugin ESLint. Tali accorgimenti dovrebbero essere sufficienti per evitare che la verifica del compilatore dia esito negativo.