How Does React Native 0.61 Fast Refresh Impacts Developers?

Whenever we talk about the cross-platform, mention of React Native has to be made. 

In the pre-cross-platform era, developers struggled with traditional methods like Native technology, where they had to code separately for each platform it is going to target.

For instance, say a developer had to make an app for iOS and Android as well, they had to do everything separately for both platforms to build the same app. To eliminate this arduous process, React Native was introduced which brought the WORA (Write Once, Run Anywhere) functionality and eased the whole development process.

The reception of this technology is so positive that it is now one of the top 10 cross-platform frameworks.

Nevertheless, React Native also has its fair share of downfalls, however minor, that sometimes hinder the mobile app development process.

React Native’s Persistent Issues:

• Upgrading React Native from one version to another is a tedious and time-consuming process. Especially when one has fallen back a few updates and try to do it all at once.
• In React Native, it is challenging to find the main cause of an exception. The stack trace in the Chrome debugger console leads to time-consuming debugging, as it more often than not leads to ExceptionManager and not the original place. In fact, componentDidCatch is not a big help either.
• React Native’s popular Hot Reload feature, sadly, does not work properly with Stateless Functional Components (SFC). If this issue gets fixed, it will get easier to hot reload any React Native code reliably, without the need of reloading the entire app.
• Sometimes, React Native might not be resilient to crashes. It does not provide much information as to why the app crashed.
• React Native’s ram bundle is not supported by any OTA platform such as CodePush. This problem is caused as React Native does not have a wide connected community.

Introducing React Native 0.61 Version – The solution to React Native’s Persistent Issues

React Native team announced the release date of React Native 0.61 just last week. With the introduction of this new version, users will now be able to optimize the existing features of React Native 0.60. The update comes free of bugs found in the previous update and comes bearing new improved features that are all mentioned in the React Native 0.61 documentation.

New Features of React Native 0.61

1. React Native provides improved CocoaPods support

In 0.60, some updates were made to integrate CocoaPods by default. However, this created issues in the use_frameworks!. This issue was addressed and is now fixed in 0.61, making it more simple and easy to integrate React Native into the iOS projects that need to be built with dynamic frameworks.

2. New useWindowDimensions Hook 

This new feature named Hook naturally offers and subscribes to dimension updates. It can also be used in the place of the Dimensions API in most of the cases.

3. React is now upgraded to 16.9

The new version opposes old names for the UNSAFE_ lifecycle methods, includes improvements to act, and so on.

4. Fast Refresh

This new feature is a mixture of existing “live reloading” and “hot reloading”

Let’s discuss some impressive points of the Fast Refresh feature which React Native developers are going to appreciate.

How Would Fast Refresh Impact Developers

It was high time for the React Native team to address the “hot reload” issue. And now they have, with Fast Refresh.  Here is what Fast Refresh has to offer to developers.

• New Fast Refresh feature entirely supports modern React along with function components and Hooks.
• It skillfully recovers from mistakes like typos, etc. Moreover, Fast Refresh also falls back to a full reload when the need be.
• Fast Refresh doesn’t practice invasive code transformations, making it trustworthy and reliable to be on by default settings.

Developers have started to agree after some testing that Fast Refresh is highly reliable along with being flexible. It is not easy and simple to put react Native in a position where you need to reload manually. Fast Refresh works perfectly for both class components and functional components and some even believe it may update faster.

It is actually the exact same element as hot reloading; the only difference is that this time, it is performed excellently.

In order to upgrade to the new version, our React Native team advises employing the new React Native Upgrade Helper, which would show and highlight which files need to be changed. Though it might seem like a primitive way to update, it is actually a pretty straightforward way.

All these new changes and improvements are enough to make us believe that React Native 0.61 version is majorly going to facilitate React Native app development.

THE AUTHOR

Dileep Gupta

DIRECTOR & CO-FOUNDER