La sostituzione del modulo hot (Hot Module Replacement o HMR) è una caratteristica offerta da Webpack, che è spesso utilizzata con React. Permette di sostituire i moduli che sono stati aggiornati senza dover aggiornare l’intera pagina. Questo comporta un notevole risparmio di tempo durante lo sviluppo, poiché non devi attendere il caricamento completo della pagina per vedere gli effetti delle modifiche al codice.
Ecco come funziona:
1. Durante lo sviluppo, utilizzi Webpack dev server o simili, che supportano l’HMR.
1. Quando salvi i tuoi file sorgente, Webpack li compila e, se configura correttamente, sfrutta l’HMR.
1. Webpack invia l’aggiornato modulo (o moduli) al client (il tuo browser).
1. L’HMR nella pagina in esecuzione nel browser rileva l’aggiornamento e sostituisce gli stessi moduli con le nuove versioni nel tuo bundle di codice, senza dover ricaricare l’intera pagina.
1. React poi può ricorrere al suo meccanismo di riconciliazione per aggiornare l’interfaccia utente in base a qualsiasi stato che è stato modificato.
E’ importante notare che l’HMR non è destinato ad essere utilizzato in produzione, è solo uno strumento di sviluppo.
Per utilizzare l’HMR con React devi configurare Webpack (o Babel) di conseguenza e utilizzare alcuni pacchetti aggiuntivi, come react-hot-loader. L’opzione Create React App di Facebook ha un supporto integrato per l’HMR.
