What is hot-reloading exactly, is it just another fancy term for live-reloading?

I keep hearing this term frequently. Is hot-reloading somehow different from live-reloading? If yes, what is the exact difference, and can you explain it by example?

Start a personal dev blog on your domain for free and grow your readership.

3.4K+ developers have started their personal blogs on Hashnode in the last one month.

Write in Markdown 路 Publish articles on custom domain 路 Gain readership on day zero 路 Automatic GitHub backup and more

Marcus Pohorely's photo

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? ;)

Aniruddh Mukherjee's photo

That was a wonderful explanation Marcus! Thanks a lot!

Sunny Singh's photo

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).

Dex's photo

BrowserSync can inject HTML without a page refresh through the use of a plugin: https://github.com/shakyShane/html-injector

Andrew Goldis's photo

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.