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

View other answers to this thread
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!