top of page
Logo der Online Agentur mdwp

Hot Module Replacement (HMR)

Hot Module Replacement (HMR) is a feature in modern web development tools like Webpack and Babel that updates or changes your running code modules without a full page reload. That means if you make any changes in your codebase while your application is running, HMR updates the application without refreshing the entire page, maintaining the current state of your app.

This is highly useful in single page applications where a full page reload could be potentially costly. In React, it helps by speeding up the development process as developers can get instant feedback.

Here is a basic example of how HHR can be used with Webpack:

if ( {'./myModule', function() {
var updatedMyModule = require('./myModule')


//Replace any old functionality with new functionality here

In this code, if 'myModule' (imaginary module for this example) gets updated, the hot module accepts it and retrieves it using require(). It then calls a function to resolve the changed parts. This update happens in real-time without needing a full page reload.

Remember that for this to work, the parent module needs to handle the updates to the child modules. React Hot Loader is a library that makes this task easier in React, ensuring React components can be updated correctly. Remember not all modules, especially those with side-effects, can be hot-replaced correctly and some cases might need a full page reload still.

bottom of page