What’s new in React Native new version 0.61?

Previously, we were not able to take advantage of both worlds with React Native. We were either able to create function components using hooks or we could write class components and got the benefits of hot reloading. Hot Reloading is something not supported by function components. The latest feature in React Native new version 0.61, “Fast Refresh” can help you. Let us discuss the same in this blog.

About Hot Reloading in React Native

React Native is designed with an objective to deliver the best developer’s experience. The best thing is that it takes you between saving a File and see the changes to it. So, how to manage these changes under 1 second as your app grows? It can be achieved in three ways:

1. You can choose the JavaScript programming language having less compilation cycle times.
2. You can implement a tool that can convert the complex file into a simple JS format and easy to understand by Virtual Machine as well. It helps in managing changes much faster than your expectations.
3. You may add a feature Live Reload where the app is reloaded every time you save it.

At this point, the problem is that you can lose the state of an app. Every time you refresh changes, you have to click on the same path again and again to get back the features that make the overall cycle-times longer. The role of “Hot Reloading” comes into the picture, here.So, what is Hot Reloading in React Native?

It is a process that keeps an app in running state and injects new versions of files that you edit at the runtime. In this way, you will not lose the state of an app that is extremely useful even if you are shuffling through multiple screens. The feature allows you to add modules that were not available earlier without a full reload. 

The Fact to Consider:

Keep in mind that JavaScript is a stateful language and hot reloading cannot be implemented successfully sometimes. So, you should try full reload in case of a mess up. It is possible to enable “Hot Reloading” option using the Developer Menu in the React Native.

Hot Reloading has been revamped in the 0.61 version

The hot reloading function is rebranded to Fast Refresh and Live Reloading option has been removed. It is a bold move by developers and they are sure that they don’t need Live Reloading option anymore. With continuous testing, they have stated that Fast Refresh option is more secure and reliable. 

It is almost impossible in React.js Development to bring it in a state where manual reloads are needed. This option is suitable for both either they are class components and function components. According to developers, making changes live to an application has become much faster now than earlier. 

Fast Refresh and Hot Reloading both work with the same objective but Fast Refresh option can execute content marvellously. It is great news for React Native users who were working on complex apps which needed changes frequently.  

Logs in Metro Blunder

This is another interesting  feature in the React Native version 0.61 that will display the logs in the Metro Blunder. The XCode way is too cluttered and you don’t have Remote debugger open all the time, so this is again a great feature that was not available earlier.

How to upgrade to the React Native new version 0.61?

Upgrading to newer or advanced versions will give you access to more APIs, tools, features, utilities, etc. Upgrading to an advanced version will take little efforts but it is easy with the right approach and a step-by-step guide. Three projects supported by this framework are Android, IOS, and JavaScript projects. Here are two popular techniques to help you with the upgrade, these are React Native CLI or Upgrade Helper. Let us see how are they working.

React Native CLI

It comes with an upgrade option where source files can be quickly upgraded to the advanced version with minimum conflicts. It internally finds files that should be removed, created, or modified. So, how to do it using commands?  Start with the following command to upgrade to the latest version.

You can also specify a by using the following command:

Upgrade Helper

Another popular option is Upgrade Helper which is a web tool and helps you when upgrading your apps to the latest version. It also gives detailed documentation on why a particular change is made to the file.

Summing Up:

It is clear from the discussion that React Native 0.61 is a joyful update that will boost the developer experience and easy to upgrade as well. I Hope the React Native Architecture is more stable now and we will be listening more happening updates in the near future.