Gli sviluppatori di React hanno dato vita ad un progetto dedicato all’introduzione di un compilatore sperimentale. Quest’ultimo è stato rilasciato fin da subito sotto licenza Open Source per raccogliere il maggior numero di feedback nel più breve tempo possibile. Si tratta in ogni caso di una soluzione ancora in fase embrionale che non dovrebbe essere utilizzata negli ambienti di produzione. Per partecipare ai test è necessario disporre come minimo di React 19 Beta. L’ultima stabile rilasciata è invece la 18.3.1.
Come funziona il React compiler
Lo scopo principale di questo compilatore è quello di ottimizzare automaticamente le applicazioni basate su React. Esso è in grado di operare su codice JavaScript puro ed è in grado di interpretare le regole del framework. Questo significa che per utilizzarlo non sarà necessario alcun intervento sui sorgenti dei propri progetti. Con il compilatore è incluso anche un plugin ESLint con cui individuare e correggere problemi di codifica in JavaScript tramite linting (o analisi del codice).
L’estensione viene eseguita indipendentemente dal compilatore, quindi può essere utilizzato per le verifiche di sintassi anche quando non si sta impiegando il compilatore in un’applicazione.
A livello pratico il compilatore React “memoizza” automaticamente il codice come succede con le API useMemo, useCallback, e React.memo. Queste ultime permettono di comunicare al framework che alcune parti dell’applicazione non hanno bisogno di essere ricalcolate se il loro input non ha registrato modifiche. In questo modo viene ridotto il lavoro sugli aggiornamenti.
Può però sempre succedere di dimenticare la memoization o di applicarla in modo errato. Questo potrebbe portare ad aggiornamenti inefficienti poiché React deve controllare parti dell’interfaccia utente che non hanno subito cambiamenti importanti. Il compilatore agisce appunto in automatico, evitando che possano verificarsi errori e sostituendosi, in parte, allo sviluppatore.
Quando è utile il compilatore
Il compilatore sfrutta la sua conoscenza di JavaScript e delle regole di React per memorizzare ( non “memoizzare” in questo caso) automaticamente i valori o i gruppi di valori all’interno di componenti e hook. Se rileva violazioni delle regole, salterà solo questi ultimi, continuando a compilare il resto del codice in sicurezza.
Se il sorgente è già ben ottimizzato con la memoization, potrebbero non essere registrati dei miglioramenti significativi delle prestazioni. Tuttavia, memorizzare correttamente le dipendenze che causano problemi di performance è un’operazione complessa da svolgere manualmente. Da qui l’esigenza di un compilatore.