In a React Native application, developers often make changes to the code and want to see the results in real-time, without having to manually refresh the app. This can be a time-consuming and tedious process, especially when making multiple changes to the code.
Hot Reloading: Hot Reloading is a feature in React Native that allows developers to see changes made to their code in real-time, without having to manually refresh the app. It automatically reloads only the modified code, preserving the state of the app. This means that any variables, functions, or components that were in use before the reload will still be available after the reload.
Key Points:
- Only reloads the modified code
- Preserves the state of the app
- Allows developers to see changes in real-time
Live Reloading: Live Reloading is another feature in React Native that allows developers to see changes made to their code in real-time, without having to manually refresh the app. It reloads the entire app, discarding the current state. This means that if the developer has made changes that affect the state of the app, they will not be preserved. Live Reloading is useful when the developer wants to start fresh with the app or discard any previous state that might be causing problems.
Key Points:
- Reloads the entire app
- Discards the current state
- Allows developers to see changes in real-time
Installation: Here we will use the Expo CLI version which will much smoother to run your React Native applications. Follow the below steps one by one to set up your React native environment.
Step 1: Open your terminal and run the below command.
npm install -g expo-cli
Step 2: Now expo-cli is globally installed so you can create the project folder by running the below command.
expo init "projectName"
Step 3: Now go into the created folder and start the server by using the following command.
cd "projectName" npm start web
Project Structure:
Example 1: This example will demonstrate the Hot Reloading:
Javascript
import React, { Component } from 'react';import { Text, View } from 'react-native';class App extends Component { state = { count: 0 } increment = () => { this.setState({ count: this.state.count + 1 }); } render() { return ( <View> <Text>Count: {this.state.count}</Text> <Text onPress={this.increment}>Increment</Text> </View> ); }}export default App; |
To enable Hot Reloading or Live Reloading the developer can shake the device or press the menu button (in an emulator) and select “Enable Hot Reloading”/ “Enable Live Reloading”. Once this is done, any changes made to the code, such as incrementing the count state, will be reflected in the app in real time without discarding the current state.
Output:
Both Hot Reloading and Live Reloading are featured in React Native that allow developers to see changes made to their code in real-time, without having to manually refresh the app. Hot Reloading automatically reloads only the modified code, preserving the state of the app, while Live Reloading reloads the entire app, discarding the current state. The developer can choose which feature to use based on their needs and the specific changes they are making to the code.
In Summary, Hot Reloading allows developers to make small changes to their code and see the results immediately, while Live Reloading reloads the entire app whenever a change is made. Both features can be useful in different situations and can save a lot of time during the development process.
