Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Difference between hot reload and fast refresh in react-native

In versions before 0.61 of react-native for reflecting code changes, we have two options.

  1. Live Reload (Reloads the app when detects some changes)
  2. Hot Reload (Reflect the changes without reloading)

but in the version 0.61, removing these two (Live Reload, Hot Reload) there is been a new developer feature introduced named Fast Refresh which also works similar to Hot Reload so now the question is what is the fundamental difference between Fast Refresh and Hot Reload.

like image 443
Waheed Akhtar Avatar asked Nov 28 '19 09:11

Waheed Akhtar


People also ask

What is the difference between hot reloading and live reloading in react native?

The difference between the two is, Live Reloading is gonna reload your entire application. It's just gonna be like, okay, the file changed, reload the entire app. Hot Reloading is not gonna reload your entire application. It's just going to patch the code that was changed and keep the state in your app.

What is fast refresh in react native?

Fast Refresh is a React Native feature that allows you to get near-instant feedback for changes in your React components. Fast Refresh is enabled by default, and you can toggle "Enable Fast Refresh" in the React Native developer menu. With Fast Refresh enabled, most edits should be visible within a second or two.

Does react native has hot reload?

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.

What is a hot reload?

What does Hot Reload do? The idea behind Hot Reload is simple – while your application is running, you can make changes to the code and apply them to the running application. No recompilation is needed, and when possible, the state of your application is kept intact.


1 Answers

The “hot reloading” feature was broken. It didn’t work reliably for function components, often failed to update the screen, and wasn’t resilient to typos and mistakes. They heard that most people turned it off because it was too unreliable.

In React Native 0.61, they’re unifying the existing “live reloading” (reload on save) and “hot reloading” features into a single new feature called “Fast Refresh”. Fast Refresh was implemented from scratch with the following principles:

  • Fast Refresh fully supports modern React, including function components and Hooks.
  • Fast Refresh gracefully recovers after typos and other mistakes, and falls back to a full reload when needed.
  • Fast Refresh doesn’t perform invasive code transformations so it’s reliable enough to be on by default.

Read more from the official docs

like image 57
abhikumar22 Avatar answered Oct 01 '22 03:10

abhikumar22