Jon Preece

Follow DeveloperHandbook.com on TwitterJon Preece
Published on Dec 31, 2018 · Updated on Sep 14, 2019 · 3 minute read.

Hot Module Reloading (HMR) is an essential tool in every front-end developers tool chest. When using Webpack along with Webpack Dev Server, with a little extra configuration you can easily enable HMR, which will get your changes in screen quicker and often whilst maintaining the state of your application.

Before we can add Hot Module Reloading to our React project, we need some React code! Let’s do that first.

How to create a simple React application

We are not trying to win any awards here, we only need to get React rendering out something so we can move on. This is not a tutorial about how to build a useful React website, after all.

Start by installing React, and ReactDOM. Both are required to render a React browser-based web application.

npm install --save react react-dom

Note: These are runtime dependencies, so we use --save instead of --save-dev.

Open index.js (in the src folder), delete all the existing code, and add the following;

import React from 'react'
import ReactDOM from 'react-dom'
import App from './app'

ReactDOM.render(<App />, document.getElementById('root'))

Note: If you are following this series from the beginning, and you have enabled TypeScript, rename your index.ts file to index.tsx to avoid TypeScript related warnings in your editor. From here on out, use the .tsx file extension instead of .js or .jsx.

Next, create a new file called app.js and add the following;

import React from 'react'

function App() {
  return <h2>This is our React application!</h2>
}

export default App

Run npm start and observe the application in the browser;

Simple React application
Simple React application

With Webpack, we do get some automatic refreshing behaviour out of the box, but we will take steps to configure this properly using react-hot-loader.

Add Hot Module Loading for React

A killer reason for using a tool like Webpack is hot module reloading (HMR). HMR enables you to see your changes in the browser almost immediately as you make them, usually without the need to refresh the page or lose your application state.

To add HMR, first install react-hot-loader as follows;

npm install --save-dev react-hot-loader

We then add react-hot-loader to Babel as a plugin. Update the .babelrc as follows (add the plugins key/value);

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
+  "plugins": ["react-hot-loader/babel"]
}

Then we update our application to utilise HMR. Open app.js and change the code as follows;

import React from 'react'
import { hot } from 'react-hot-loader/root'

function App() {
  return <h2>This is our React application!</h2>
}

export default hot(App)

Finally, update your start NPM script with the --hot flag, as follows;

"start": "cross-env NODE_ENV=development webpack-dev-server --hot --config webpack.config.js"

We use the hot higher order function to enable HMR. HMR should now be active and working properly.

Make a superficial change in app.js, save the file and observe the sweet sweet goodness of HMR as your app immediately updates with no refresh!! Congratulations, you have successfully enabled Hot Module Reloading.

Summary

We can utilise Hot Module Reloading (HMR) with Webpack Dev Server to reduce the amount of time needed to see our changes on screen. HMR also has the benefit of not refreshing the entire page, only the components that we have edited since the last time we saved our changes. This means that our position in the application, and the application state, are often left untouched, meaning we can easily carry on from where we were up to.

Next steps

If you would like to continue learning about Webpack, check out the next post in the How to configure SCSS modules for Webpack

WebpackReactJavaScriptwebpack-intro-series

Jon Preece

About the author

I am Jon Preece, an experienced website and software developer from the United Kingdom, based in Manchester.

Throughout my 10+ year professional career I have worked in many sectors, including; e-commerce, financial services, marketing, healthcare, travel and accountancy. Get in touch via Twitter.