Habilitar Hot Module Replacement (HMR) en React

React hot module replacenment

El Hot Module Replacement (o HMR) es una de las funciones más útiles que ofrece webpack. Permite la actualización de todo tipo de módulos en tiempo de ejecución sin necesidad de una recarga del navegador.

HMR no está destinado para ser usado en producción, sólo puede ser usado en un entorno de desarrollo.

Puedes leer más de HRM en la documentación de webpack: Hot Module Replacement

Cuando iniciamos una aplicación en React con create-react-app es una gran ventaja que cuando hagamos cambios en nuestro código se recargue la página automáticamente. Lo puedes comprobar haciendo un cambio sencillo en src/App.js, verás que el navegador detecta el cambio y se recarga.

Pero hay una mejor manera, con HRM, esta funcionalidad te permite actualizar tu web sin necesidad de recargar el navegador, esto es algo muy útil pues nos ayuda a agilizar el tiempo de desarrollo.

Activar esta funcionalidad es muy sencillo, primero crear un proyecto con create-react-app:

create-react-app test_hrm

Abrimos el archivo src/index.js y pegamos al final del archivo el siguiente código:

if (module.hot) {
    module.hot.accept();
}

Listo, ya nuestro proyecto no actualiza el navegador cada vez que hacemos un cambio, solo actualiza el módulo que cambiamos. Puedes probar cambiando el ‘Hello World’ o algún estilo de tu archivo App.js.

Pueden seguirme el Twitter como @bacabange