Fast Refresh in React Native 0.61
This post will have the information about the new fast refresh feature in React Native 0.61. You will also get to know about the new features and the updates in the React Native 0.61. I know I am late to post about it but still, I want to share that React Native 0.61 stable is out for the use and many of you are already using it. Let’s see the new features and the changes React Native does in the 0.61 version.
Major updates in React Native 0.61
As per the release note here are the 3 major updates:
- Whole new hot reloading experience, called “Fast refresh”. It is turned on by default and can be accessed under the developer menu.
- React version has been updated to 16.9
- Better CocoaPods support with use_frameworks!
After reading all the 3 points you can understand what is new but in this post, I want to talk more about “Fast Refresh”. It is the feature which made my day and I am personally very satisfied with this feature. Below you can see how it is different from the previous “Live Reloading ” and “Hot Reloading” options provided in the debugging menu.
For those who don’t know about the debugging menu, they can go through this or can read our post on React Native Debugger.
Options Before Fast Refresh
We were having two options “Live Reload” and “Hot Reload” in the debugging options before launching “Fast Refresh”.
If we talk about the “Live Reloading” then it reloads or refreshes the entire app when a file changes and in case of “Hot Reloading” it only refreshes the files that were changed without losing the state of the app.
These were very useful features while debugging your app as it reloads your app nearly in runtime and you can see the changes of your app in seconds but the “Hot Reloading” feature was broken. It didn’t work reliably for function components and often failed to update the screen. It wasn’t resilient to typos and mistakes and most of the people turned it off because it was too unreliable. That was the reason to update these features.
Fast Refresh Feature
In React Native 0.61 they have unified the existing “Live Reloading” and “Hot Reloading” features into a single new feature called “Fast Refresh” and it was made from scratch.
It is always turned on by default and can be accessed under the developer menu. It was implemented with the following principles:
- Fully supports modern React, including function components and Hooks
- Gracefully recovers after typos and other mistakes and falls back to a full reload when needed.
- It doesn’t perform invasive code transformations so it’s reliable enough to be on by default.
Few Fast Refresh Tips
Other than that here are a few Fast Refresh tips:
- Fast Refresh preserves React local state in function components (and Hooks!) by default.
- If you need to reset the React state on every edit, you can add a special
// @refresh reset
comment on the file with that component. - Fast Refresh always remounts class components without preserving the state. This ensures it works reliably.
- We all make mistakes in the code! Fast Refresh automatically retries rendering after you save a file. You don’t need to reload the app manually after fixing a syntax or a runtime error.
- Adding a
console.log
or adebugger
statement during edits is a neat debugging technique.
That was the basic information that I wanted to share about the new Fast Refresh feature in React Native 0.61. If you have any type of additional information to share then you can comment below so that others can also take the help from that.
Hope you liked it.