Hot Reloading aka Hot "Module" Reloading is exactly what the name refers to and is a big difference to livereload. Livereload can inject HTML on-the-fly and can inject new stylesheets, but it's simply not able to inject JS the right way. When you develop an Application where you build your Js using Modules then the Hot Part of reloading can replace your module on-the-fly without changing any state of your app. Thats even nicer in combination with redux, flux and so on. Your App never reloads, just your changed JS Party exchange right when you hit save.

Example: You build an One-Page-App only with JS, a few clicks in the app and you are possible in a route which is difficult to call directly (or is form f.e. which is big and already filled). And there you have a Button. You click and your click handler isn't doing what it`s supposed, so you change it in the code and hit Save. What happens? Livereload: Reloads the Page, your Form State is gone, you have to fill out everything again and replay what you did before. HMR: The Button Module gets replaces on-the-fly, no reload happens, you are where you have been, click the Button again and your new function (replaced module) is working like it should be (when you do things right ;))

There is NOTHING better than a smoothly running HMR Enviroment (when working with JS).

PS: It's horrible difficult to setup, but once you got it, nothing is better!

Good enough explanation? ;)

You can consider it the same but the big difference is that it will reload parts of your code on-the-fly without reloading the entire page. This is extremely useful when you want to maintain the current state of your page (e.g. filled form inputs) while making UI updates. This way you don't have to refill a form or do some action over and over again after updating your code. Hot reloading is also capable of updating actionable code without reloading the page, such as the function for when a button is clicked.

With that said, I've noticed that Browsersync can actually hot-reload CSS now, so "live-reloading" tools like that seem to be integrating similar functionality. However, I don't think it can hot-reload HTML or JavaScript unless you're using it alongside Webpack or Browserify (correct me if I'm wrong on that).

TL;DR It's like live-reload applied to a single module (in terms of JS modules), you change a file (ReactJS component/ redux action or reducer), kick save - the module reloads almost instantly and you see the changes in browser WITHOUT RELOADING THE WHOLE APP. It might be hard to set up.

run 3 : This is a very well-written and informative post. In my opinion, this is one of the very best posts that has ever been published. Your work is outstanding, and it motivates me to do better. Please accept my sincere gratitude.

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. LOL Beans is an entertaining battle royale platformer. Challenge your friends to a race and win!