Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

What are the conceptual differences between live reloading, hot reloading, and hot module replacement?

Tags:

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.

like image 826
Amy Pellegrini Avatar asked Nov 30 '16 13:11

Amy Pellegrini

People also ask

What is the difference between hot reloading and live reloading?

The difference between the two is, Live Reloading is gonna reload your entire application. It's just gonna be like, okay, the file changed, reload the entire app. Hot Reloading is not gonna reload your entire application. It's just going to patch the code that was changed and keep the state in your app.

What is hot module replacement?

Hot Module Replacement (HMR) exchanges, adds, or removes modules while an application is running, without a full reload. This can significantly speed up development in a few ways: Retain application state which is lost during a full reload.

What is live reloading?

Live reloading will reload the whole app and completely reinitialize the state. It only reloads the file that changed. It reloads the whole app.

What is hot reloading in JavaScript?

The idea behind hot reloading is to keep the app running and to inject new versions of the files that you edited at runtime. It leverages HMR and without reloading the page, replaces changed components in-place, preserving state.

1 Answers

So I just came across the same question today and thought it's good to share my findings:

Live Reload - Triggers an app wide reload that listens to file changes

Hot Module Replacement - Is the same as Live Reload with the difference that it only replaces the modules that have been modified, hence the word Replacement. The advantage of this is that it doesn't lose your app state e.g. your inputs on your form fields, your currently selected tab etc. Here's a full-blown explanation from another SO answer.

Lastly, Hot Reloading is just short for Hot Module Replacement.

Here's a explanatory video which you can look at and differentiate LR from HMR.

like image 170
JohnnyQ Avatar answered Sep 22 '22 03:09

JohnnyQ
Sign in to Comment

Related questions

Can System.Web be used with ASP.Net Core with Full Framework
Spring Security, JUnit: @WithUserDetails for user created in @Before
Is it allowed to call destructor explicitly followed by placement new on a variable with fixed lifetime?
Meaning of asterisk and arrow symbols in Gradle dependencies tree
Why Array.forEach is slower than for() loop in Javascript? [duplicate]
How to avoid blocking of scrolling itself when using setNestedScrollingEnabled(false)?
Replace Validation Monitors with tf.train.SessionRunHook when using Estimators
Annotations on variables declared in try-with-resources?
Identifier refers to a private member of the component
vue.js best way to update entire array
What is the Rule of Four (and a half)?
Pass custom props to Redux Form Field in TypeScript

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!