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?

Write your answer…

3 answers

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

Reply to this…

Hashnode is a friendly and inclusive dev community.
Come jump on the bandwagon!

  • 💬 Ask programming questions without being judged

  • 🧠 Stay in the loop and grow your knowledge

  • 🍕 More than 500K developers share programming wisdom here

  • ❤️ Support the growing dev community!

Create my profile

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

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

Reply to this…

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.

Reply to this…