So far, we have not been getting the best of both worlds in React Native: You could either write function components and use hooks, or you could write class components and get the benefit of hot reloading. However, hot reloading was not supported for function components. Will the brand new React Native 0.61 RC1 with “Fast Refresh” bring help? Let’s take a look.
Hot reloading is now Fast refresh
The React Native team has rebranded Hot Reloading to Fast Refresh and removed the option for Live Reloading. This is a bold move: That means they are so confident in Fast Refresh, they think you don’t need Live Reloading anymore.
And after some testing I agree: Fast Refresh is reliable and resilient. It is really hard to bring React Native into a condition where you have to manually reload. It just works for both class components and for function components and I even have the feeling it updates faster than before.
Fast Refresh is the exact same idea as hot reloading but this time it is executed marvellously and this is why I think it’s a great idea to rebrand it.
In two cases Fast Reloading did not work as expected: Hot reloading within a <Modal/> from
react-native-modal causes the modal to dismiss and when I introduce an error into my code, it just says “Refreshing” and then does not show an error modal. It doesn’t bother me a lot though.
Logs in Metro Bundler
This is awesome — Logs now show up in Metro Bundler in a very tidy and neat way. The Xcode console is way too cluttered and you don’t always have Remote Debugger open, so this is another really nice upgrade from what we had before.
Upgrading to React Native 0.61
Even though React Native 0.61 is subject to change, I anyways already upgraded to the Release candidate. I definitely recommend to use the relatively new React Native Upgrade Helper, which shows which files have to be changed. It is a primitive but straightforward way to update. In this case, changes to the Podfile, to build.gradle and to package.json had to be done. I also had to run
pod install again afterwards.
I am happy to report that this upgrade from React Native 0.60.4 only took about 5 minutes and I did not stumble upon and difficulties. iOS and Android builds worked as well.
One thing that I did not look into is that now a debugging tool called Flipper is built into React Native out of the box. I got to explore the main things I wanted though and my feeling currently is that React Native 0.61 is a joyful update: It boosts the developer experience a lot and is easy to upgrade to. I hope the React Native architecture has now stabilized and we are in for more awesome updates like this in the future!
Update 29/08/2019: The feature is actually called Fast Refresh, not Fast Reloading. I have updated the article now.