React 17 è stato rilasciato la settimana scorsa, dopo, circa, 2 anni e mezzo dall’uscita di React 16.

React 16 ha portato una ventata di novità, quali, una delle più importanti, gli Hooks!

Oggi analizzeremo, invece, cosa porta con sé React 17.

React 17 non introduce nuove feature o breaking changes!

Nessuna nuova Feature

Questa nuova versione di React non introduce nuove feature, ma è focalizzata sull’aggiornare a nuove versioni di React facilmente.

Nel dettaglio, questa nuova versione è un “trampolino di lancio” per integrare più versioni di React nella stessa app o integrarlo con altre tecnologie.


Aggiornamenti Graduali

React 17 abilita gli upgrade graduali.

Solitamente, quando viene rilasciata una nuova versione di React, si tende ad aggiornare tutta l’applicazione.

Se, però, abbiamo un grosso progetto, magari legacy e che non viene mantenuto con costanza, il passaggio ad una nuova versione della libreria può essere arduo.

In alcuni scenari, magari, si è optato per utilizzare due versioni di React diverse nello stesso progetto.

Anche se è possibile caricare più versioni nello stesso progetto/pagina, prima di React 17, si poteva andare in contro a problemi con la delegazione degli eventi.


Ovviamente, questa novità, non vi obbliga ad utilizzare gli upgrade graduali, anzi, per la maggior parte delle app, aggiornare tutto rimane la soluzione migliore.

Cambiamenti all’Event Delegation

Per poter abilitare gli upgrade graduali, il team di React ha dovuto cambiare il sistema di delegazione degli eventi.

React 17 è una major perché questi cambiamenti al sistema di eventi, potrebbero essere, potenzialmente, dei breaking.

React Team

Ma entramo nel dettaglio, cosa cambia sotto il cofano?

Prima di React 17, la maggior parte degli eventi, venivano registrati con un document.addEventListener().

Con React 17, invece, verranno registrati con rootNode.addEventListener().

Questa modifica comporta che ogni evento che andremo a scatenare si rifletterà sul nostro nodo di mounting point e non sul documento in sé.


JSX Transform

Che cos’è JSX Transform?

Come per Typescript, i Browser, non interpretano il codice scritto in JSX.


React utilizza un compilatore simile a Babel e Typescript per transformare il JSX in JS nativo.


Che benefici comporta la nuova versione?

Anche se, per il momento, l’upgrade alla nuova versione è completamente opzionale, questa porta alcuni benefici come:

  • Non è più richiesto l’import di React in ogni file
  • In base al setup, possono esserci miglioramenti alla dimensione dei bundles.
  • In futuro, sarà possibile ridurre il numero di concetti da conoscere per utilizzare React.

Per approfondimenti ed esempi, vi rimando al post dedicato sul blog di React.


Summary

Queste sono solo alcune delle novità che il team di React ha apportato al core della libreria.

Alcuni altri esempi di migliorie sono:

  • Il bubbling dell’onScroll
  • Il “timing” del cleanUp dell’hook useEffect
  • La rimozione dell’Event Pooling

E tu, cosa ne pensi della nuova versione di React?

Aggiornerai a breve la tua applicazione o sei rimasto deluso dal lavoro del team?


Leave a Reply

Your email address will not be published.