We will introduce types of reloading in React Native and the benefits and disadvantages of live and hot reloading in React Native.
Types of Reloading in React Native
The two types of reloading are
live reloading and
hot reloading. React Native supports both live and hot reloading, even though they are different.
Live Reloading in React Native
Live reloading can compile and read our changes by furnishing a new file to the simulator that automatically reads the app from the start.
Hot Reloading in React Native
It is based on Hot Module Replacement (HMR). The process of hot reloading is different from live reloading. It only reads the changes made by us and reloads the component where they are made. The application doesn’t have to read the app from the start, but it stays in the same state.
The primary advantage of hot reloading lies in the ability of hot reloading to sanction the changes in the source code in a way that lets us view the code changes, even if we have not recompiled the whole application.
So, If we have two or more windows opened for the code and the application screen, we can instantly see the results after making the changes in the code. Hot reloading decreases the waiting time drastically.
Another benefit of hot reloading is that if we edit any page four or five navigations away, we don’t have to navigate while seeing the changes we make on that page.
Enable Hot Reloading Feature in React Native
First, we have to launch our app on the device or the emulator by using the following command in React Native.
# react native react-native run-android
Then we need to click on the emulator and press CTRL+M or shake our Android device on which the application is running.
Then there will be a popup with an option to enable hot reloading.