25

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.

Amy Pellegrini
  • 3,200
  • 1
  • 13
  • 19

1 Answers1

31

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.

Basil Bourque
  • 303,325
  • 100
  • 852
  • 1,154
JohnnyQ
  • 4,839
  • 6
  • 47
  • 65