Jonas Notes

Hot Module Replacement

4 min read

Webpack

Introduction

Hot Module Replacement (HMR) is a powerful feature of Webpack that allows modules to be updated in the browser at runtime without a full page reload. This enhances the development experience by preserving the application state, reducing build times, and making it easier to see changes in real-time.

How HMR Works

  1. Initial Setup:

    • When you start a Webpack development server, it creates a bundle of your application and serves it. The server also includes a WebSocket connection to listen for changes.

  2. Detecting Changes:

    • When you make changes to your code, Webpack detects these changes. It uses file watchers to monitor the file system for modifications in your source files.

  3. Recompilation:

    • Webpack recompiles only the modules that have changed. This is more efficient than rebuilding the entire bundle, as it minimizes the amount of work needed to reflect changes.

  4. Notifying the Client:

    • Once the recompilation is complete, Webpack sends a message to the browser via the WebSocket connection. This message includes information about the changed modules.

  5. Updating the Browser:

    • The Webpack runtime in the browser receives the update and applies the changes. There are several steps involved in this process:
      • Downloading Updated Modules: The browser fetches the new versions of the changed modules.
      • Disposing of Old Modules: Before applying the new modules, Webpack allows modules to clean up any resources (e.g., event listeners) they were using. This is done through the module.hot.dispose handler.
      • Applying Updated Modules: The new module code is executed, replacing the old code. This can involve updating component state, rendering new UI, or other necessary changes.

HMR API

Webpack provides an HMR API that developers can use to customize the hot update behavior. Here are some key parts of the HMR API:

  1. Checking for Updates:

    if (module.hot) {
  module.hot.accept('./module.js', function() {
    // Code to execute when the module is updated
  });
}

    This code checks if the module supports HMR and defines a callback function to run when the specified module (./module.js) is updated.

  2. Disposing of Resources:

    if (module.hot) {
  module.hot.dispose(function() {
    // Code to clean up resources (e.g., removing event listeners)
  });
}

    This code allows modules to clean up resources before they are replaced by the updated code.

Practical Example

Consider a simple React component. With HMR, you can update the component without losing its state.

Before HMR:

import React from 'react';
import ReactDOM from 'react-dom';
 
const App = () => {
  return <h1>Hello, World!</h1>;
};
 
ReactDOM.render(<App />, document.getElementById('root'));

After HMR:

import React from 'react';
import ReactDOM from 'react-dom';
 
const App = () => {
  return <h1>Hello, World!</h1>;
};
 
if (module.hot) {
  module.hot.accept('./App', () => {
    const NextApp = require('./App').default;
    ReactDOM.render(<NextApp />, document.getElementById('root'));
  });
}
 
ReactDOM.render(<App />, document.getElementById('root'));

In this example, when you change the App component, Webpack updates the module in the browser without a full reload. The application state is preserved, and you immediately see the changes.

Benefits of HMR

  1. Preserves Application State: Unlike a full page reload, HMR keeps the application state intact. This is particularly useful for maintaining form data, scroll positions, and other dynamic states.

  2. Faster Development Cycle: By only recompiling and reloading the changed modules, HMR significantly speeds up the development cycle. Developers can see their changes almost instantly.

  3. Improved Productivity: With HMR, developers spend less time waiting for builds to complete and can focus more on coding, testing, and iterating on their application.

Conclusion

Hot Module Replacement (HMR) is a key feature in Webpack that enhances the development workflow by allowing real-time updates of modules without a full page reload. It preserves the application state, speeds up the development cycle, and improves productivity. By understanding and utilizing HMR, developers can create a more efficient and enjoyable development experience.

Backlinks