Difference between Hot Reloading and Live Reloading in React Native

Hot reloading and Live reloading are something that Reacts Native developers use on regular basis. Both have their own advantages and importance. But there are some key differences between these both.

What is Hot Reloading ?

Whenever you make any changes in your code, there is one thing that you have to do every time, and that saves your code and reload your application to see the changes that you have made. It's very time-consuming especially if you have made only small changes but have to reload the whole app just to see those changes.

React Native solves this problem for the developers. Hot reloading allows you to see the changes that you have made in the code without reloading your entire app. Whenever you make any changes, all you need to do is save your code. As soon as you save your code, React Native tracks which files have changed since your last saved, and only reload those file for you. It makes the entire process very fast and efficient.

Advantages:

• You don't need to recompile your app.
• The state of your app is maintained.
• Only reload those files in which you have made changes.
• You can see the changes you have made just after saving your code.
• Time-efficient.
• Modify your code without any delay.

Disadvantages:

• If you are into deep navigation, hot reloading will not work properly. In this case, you have to reload your entire app.
• If you have used hot reloading back to back without any time gap, it will mess up the output.

Before moving to example, let's quickly setup the application:

Creating Application:

Step 1: Open your Terminal and run the below command. It will install Expo CLI globally in your system.

npm install -g expo-cli

Step 2: Now, create a new React Native Project by running the below command.

expo init "Your_Project_Name"

Step 3: You’ll be asked to choose a template. Select blank template. 

Step 4: Now go to the project folder and run the below command to start the server.

cd "Your_Project_Name"
npm start

 Project Structure: It will look like the following.

Example: Open the App.js file. App.js is the main file that renders first when you run your app. Here we will create a state called number. There will be 1 button that the user can press to increase the number by 1. We will press this button multiple times to change the number state. number state will be rendered in a Text component. Then we change the style property of that Text component and save our code. This will trigger hot reloading. We will be able to see that the state of number is maintained and only the styling of the Text component will change. This will not affect any other components of our app.

import { useState } from "react";
import { Button, StyleSheet, View, Text } from "react-native";

export default function App() {
    const [number, setNumber] = useState(0);

    return (
        <View style={styles.container}>
            <Text style={styles.number}>{number}</Text>
            <Button title="Increase" onPress={() => 
                setNumber(number + 1)} />
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#fff",
        alignItems: "center",
        justifyContent: "center",
    },
    number: {
        fontSize: 20,
    },
});

Output: Now, we will press the Increase button multiple times to change the state. Then we change the style property of Text component and save our code to trigger hot reloading.

WHAT IS LIVE RELOADING?

Live reloading is as the name suggests, will reload your entire app. It will not save your app state and completely launch again. You need to do live reload when you are in deep navigation in your app because sometimes hot reloading will not work in that case.

Advantages:

• It helps you to compile your app.
• When you live to reload your app, a new file is created which will start your app from the beginning.
• It helps you better to debug your app.

Disadvantages:

• You have to reload your entire app to see the changes you have made.
• It is very time-consuming especially if your app is big and has complex navigation.

Example: Open the App.js file. App.js is the main file that renders first when you run your app. Here we will create a state called number. There will be 1 button that the user can press to increase the number by 1. We will press this button multiple times to change the number state. number state will be rendered in a Text component. Then we change the style property of that Text component and save our code. Then we reload our app to see those changes. We will be able to see that the state of number is not maintained and our app will be compiled again and start from the beginning.

import { useState } from "react";
import { Button, StyleSheet, View, Text } from "react-native";

export default function App() {
    const [number, setNumber] = useState(0);

    return (
        <View style={styles.container}>
            <Text style={styles.number}>{number}</Text>
            <Button title="Increase" onPress={() => 
                setNumber(number + 1)} />
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#fff",
        alignItems: "center",
        justifyContent: "center",
    },
    number: {
        fontSize: 20,
    },
});

Output: Now, we will press the Increase button multiple times to change the state. Then we change the style property of the Text component and save our code and reload the app.

Key differences between Hot reloading and Live reloading: