Search code examples
reloadlivereloadhot-module-replacement

What are the conceptual differences between live reloading, hot reloading, and hot module replacement?


I've seen a lot of posts and publications about live reloading, hot reloading, and hot module replacement, referring to different practices to reflect changes in code immediately in the browser when working in the web client/FE layer.

I have a fair understanding of what are these terms referring to, my only question is if these concepts are properly defined somewhere and which are the specific differences between them.


Solution

  • So I just came across the same question today and thought it's good to share my findings:

    • Live Reload
      Triggers an app wide reload that listens to file changes
    • Hot Module Replacement
      Is the same as Live Reload with the difference that it only replaces the modules that have been modified, hence the word Replacement. The advantage of this is that it doesn't lose your app state e.g. your inputs on your form fields, your currently selected tab etc. Here's a full-blown explanation from another SO answer.

    Lastly, Hot Reloading is just short for Hot Module Replacement.

    Here's a explanatory video which you can look at and differentiate LR from HMR.