What are some features of Fast Refresh in React native ?

Last Updated : 23 Feb, 2023

In this article, we discuss Fast Refresh. How it is used and what its benefits of it.

Fast refresh is a React Native element that allows you to get live feedback for changes in your Respond components. By default, Fast Refresh is enabled, and if it is not enabled then you can enable using “Enable Fast Refresh” in the React Native developer menu. By using Fast Refresh, we get responses to changes in the components within a second.

Features of Fast Refresh:

Fast Refresh cannot change the React local state in function components and Hooks.
It avoids reloading the app.
You can change state forcefully.

Options Before Fast Refresh: Before Fast Refresh comes into the picture we have two options “Live Reload” and “Hot Reload”:

Live Reloading: It is used to reload or refresh the entire app when a make change in the file.
Hot Reloading: It refreshes only the files that were changed without losing the state of the app.

Why Fast Refresh is Launched?

We already have two features Hot Reload and Live Reload for debugging apps.
These features are useful while debugging your app as it reloads your app at runtime and you can see the changes in your app in seconds. But the “Hot Reloading” feature didn’t work reliably for function components and often failed to update the screen. It wasn’t resilient to mistakes and some people disable it because it was too unreliable. That was the reason Fast Refresh is Launched.

How Fast Refresh Works: If you edit a module that only exports React component(s), you can change anything in that module, including CSS, rendering logic, event handlers, or effects. Fast Refresh will update the code only for that module and re-render your component.

If you edit a module that doesn’t export React components, Fast Refresh will re-render both the modules and the other modules importing it. For example, if both Example.js and Index.js import Master.js, and we edit Master.js, Fast Refresh will update both components.

Finally, if you edit a file that is imported by modules outside of the React tree, Fast Refresh will revert to a full reload. You can have a file that renders a react component but exports a value imported by a non-react component. For example, maybe your component exports static and a non-React utility module imports it. In that case, consider moving the constants to a separate file and importing them into both files. This will re-enable the fast refresh to work. Other cases can usually be resolved in a similar manner.

Error Resilience in Fast Refresh: We will learn error handling in Fast Refresh. We will see what types of errors Fast Refresh can resolve:

Syntax error: If you get a syntax error during a Fast Refresh session, you can fix it and save the file that time. The Redbox of errors will disappear. This prevents the reloading app because of Syntax errors in the Modules.
Runtime error inside the module: If you make a mistake during the module initialization, for example, typing Style. create instead of StyleSheet.create, the Fast Refresh session will continue once you fix the error. It’s called a runtime error and when you fix this issue, Redbox will disappear, and the module will be updated.
Runtime error inside the component: If you make a mistake inside your component, the Fast Refresh session will render after you fix the error. In that case, React will reload your application using the updated code.
Error boundaries: If you have error boundaries in your app, Fast Refresh will retry reloading on the changes after a Redbox.

Create React app: To create react app follow the steps:

Step 1: Install React Native using the following command

$ npm i -g create-react-native-app

Step 2: Create project

$ create-react-native-app fast-refresh

Step 3: Go to the folder named fast-refresh

$ cd fast-refresh

Step 4: Start the npm package manager

$ npm start

Project Structure: We see the implementation of a fast refresh, so we removed unnecessary files from the project file directory. Then our project structure looks like this:

Project structure

Example 1: In this example, we will see how the render() method takes input data and returns it to display live. Input data is passed to the react component and it can be accessed by render() via this.props.

Index.js

Javascript

import React, { useEffect } from 'react'
import ReactDOM from 'react-dom'
import './style.css'
export function App({ i = 0 }) {
    const [count, setCount] = React.useState(2)
    useEffect(() => {
        const interval = setInterval(() => {
            setCount(i => i + 2)
        }, 1000)
        return () => {
            clearInterval(interval)
        }
    }, [])
    return (
        <div className="App">
            <h1>React Fast Refresh {count}</h1>
            <h2>Cool Feature</h2>
        </div>
    )
}
ReactDOM.render(<App />, document.getElementById('root'))

Output:

Example #1 output

Example 2: In this example, we use the props and state. Use state to track the current list of items and the text entered by the user.

Index.js

Javascript

import React, { useEffect } from 'react'
import ReactDOM from 'react-dom'
import './style.css'
 
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = { items: [], text: '' };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
    render() {
        return (
            <div>
                <h3>Add your favorite language</h3>
                <List items={this.state.items} />
                <form onSubmit={this.handleSubmit}>
                    <label htmlFor="new">
                        Make a list of Languages
                    </label>
                    <input
                        id="new"
                        onChange={this.handleChange}
                        value={this.state.text}
                    />
                    <button>
                        Add{this.state.items.length + 1}
                    </button>
                </form>
            </div>
        );
    }
    handleChange(e) {
        this.setState({ text: e.target.value });
    }
    handleSubmit(e) {
        e.preventDefault();
        if (this.state.text.length === 0) {
            return;
        }
        const newItem = {
            text: this.state.text,
            id: Date.now()
        };
        this.setState(state => ({
            items: state.items.concat(newItem),
            text: ''
        }));
    }
}
class List extends React.Component {
    render() {
        return (
            <ul>
                {this.props.items.map(item => (
                    <li key={item.id}>{item.text}</li>
                ))}
            </ul>
        );
    }
}
ReactDOM.render(<App />, document.getElementById('root'))

Output:

Example #2 output

Fast Refresh with Hooks: There are some cases that explain the relationship between Fast Refresh and Hooks.

Fast Refresh tries to preserve the state of the component when they edit. For example, useState and useRef preserve their previous values as long as you don’t change their arguments or the order of the Hook calls.
Some hooks that have dependencies like useEffect, useMemo, and useCallback will always update during Fast Refresh. But some dependencies will be ignored while Fast Refresh is happening.
For example, when you edit useMemo(() => x * 2, [x]) to useMemo(() => x * 10, [x]), Fast refresh will re-render even though x (the dependency) has not changed.

Limitations: Fast Refresh preserves the local React state only if it’s safe to do so. Here are some reasons why Fast Refresh resets the local state on every edit to a file:

Local state is preserved only by function components and Hooks, not class components.
The module you’re editing may export other React components.
Sometimes, a module would export the result of calling a higher-order component and If the returned component is a class, the state will be reset.

Conclusion: We learn about what Fast Refresh is and why it is launched. Also, we discussed the working, error Resilience, and limitations.

Suggest improvement

What are Refs used for in React Native ?

Share your thoughts in the comments