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