I'm a bit confused here. When I'm debugging a React Native Application, I usually enable both Hot Reloading and Live Reloading. I want to know what is the difference between them?
356
votes
7 Answers
567
votes
Live reloading reloads or refreshes the entire app when a file changes. For example, if you were four links deep into your navigation and saved a change, live reloading would restart the app and load the app back to the initial route.
Hot reloading only refreshes the files that were changed without losing the state of the app. For example, if you were four links deep into your navigation and saved a change to some styling, the state would not change, but the new styles would appear on the page without having to navigate back to the page you are on because you would still be on the same page.
16
votes
Both can be enabled using CMD+D / CMD+CTRL+Z / Shake Gesture menu. Both are using watchman to listen to the file changes.
Live reloading reloads the entire app.
The idea behind hot reloading is to keep the app running and to inject new versions of the files that you edited at runtime. This way, you don't lose any of your state which is especially useful if you are tweaking the UI. So it reloads only that page which you change more info here
3
votes
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.
3
votes
2
votes
While developing a React-Native app you need to view your code changes and for viewing code changes there are two options in React-Native.
NOTE: These two (hot reload and live relaod) features are merged in the 0.62 version of react-native as fast refresh and if you are using a version below then these two(hot reload and live reload) will be available.
You can explore this question for more information about fast refresh and hot reload Difference between hot reload and fast refresh in react-native
1. Hot Reload
Hot reload just displays the code changes according to new code changes without restarting the app from the start and its effects only on the changed code or change will only apply to a specific component.
NOTE: Hot reload will not work sometimes if you are deep in your navigation.
2. Live Reload
Sometimes we might need Live Reload to test our code like navigation so Live reload is helpful in that case so it will reload the whole application on change in the code.
1
votes
