...

/

Adding Hot Module Replacement

Adding Hot Module Replacement

We'll cover the following...

Out of the box, create-react-app will watch your files on disk, and whenever you save changes, it will recompile the application and reload the entire page. That’s nice, but we can actually set up some improvements on that. In particular, the Webpack build tool used by create-react-app supports a feature known as Hot Module Replacement, or HMR, which can hot-swap the newly compiled versions of files into your already-open application. That lets us see our changes much faster. This works great with a React app, and even better in combination with Redux, since we can reload our component tree but still keep the same application state as before.

Using HMR requires adding some specific options to a Webpack configuration. Fortunately, CRA already has those options turned on in its Webpack config, so every CRA app has HMR enabled. From there, we need to use the module.hot API that Webpack provides to actually listen for changes to specific files, re-import the new versions, and use the new versions in our app. We can do that for both our React component tree and ...