How to Enable Hot Reloading in React Native

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.