Hot Module Replacement (HMR)

Hot Module Replacement (HMR) is a feature that allows you to update parts of your application "on the fly" while the application is running, without having to perform a complete refresh of the page. It is often used in development environments to speed up the development process and make it easier to test and debug code changes.

To use HMR, you will need to use a JavaScript bundler that supports HMR, such as Webpack or Parcel. You will also need to include HMR-specific code in your application, which will handle the process of updating the application when changes are made.

Here is a simple example of how HMR might be used in a React application:

// Enable HMR in development 
if (process.env.NODE_ENV === 'development') { 
    if (module.hot) { 
        module.hot.accept(); 
    }
}
// The rest of your application code...

In this example, HMR is only enabled in development mode (as indicated by the process.env.NODE_ENV check). If HMR is enabled, the code will check to see if the module.hot object is available, and if it is, it will call the accept method. This tells the HMR system that the module (in this case, the React component) is accepting updates.

When you make a change to your code, the HMR system will detect the change and automatically update the relevant part of the application.

For example, if you make a change to a React component, the HMR system will update the component in the browser without having to perform a full refresh of the page.

Here is an example of how you might use HMR to update a React component:

import React from 'react';
const MyComponent = () =>  { 
    return <h1>Hello, World!</h1>; 
}
// Enable HMR for the component
if (module.hot) { 
    module.hot.accept();
}
export default MyComponent;

In this example, the component is set up to accept updates using the module.hot.accept method. When you make a change to the component and save it, the HMR system will automatically update the component in the browser, allowing you to see the changes without having to refresh the page.

Basically, HMR is a useful feature that can significantly improve the development experience by allowing you to see code changes in real time. It is especially useful for large applications where a full refresh of the page can be slow and disruptive.

This is what Parcel or WebPack does behind the scenes when we have live servers running. That is why we have a saying among the Parcel connoisseur community:

"Parcel is a 'beast'." - Akshay Saini (2022).