React Native fixes ‘broken’ reloading

New feature called Fast Refresh addresses a number of bugs that caused users to turn off ‘hot reloading‘

React Native fixes ‘broken’ reloading
Thinkstock

Facebook’s React Native, a framework for building native iOS and Android apps using the React JavaScript UI framework, gains a new and improved reloading experience, called Fast Refresh, with the React Native 0.61 release.

Fast Refresh unifies the existing “live reloading” (reload on save) and “hot reloading” features. Fast Refresh is based on these principles:

  • Support for modern React including Hooks and function components.
  • Graceful recovery after typos and other mistakes, with a fallback to a full reload when needed.
  • No invasive code transformations, making the feature reliable enough to be on by default.

With Fast Refresh, React local state is preserved in function components and Hooks by default. Class components are remounted without preserving state for reliability. Rendering is automatically retried after saving a file; there is no need to reload the app manually after fixing a runtime or syntax error.

Fast Refresh was developed in response to community complaints about the “hot reloading” feature being “broken,” causing many users to turn it off due to reliability issues. Specifically, hot reloading did not work reliably for function components, often failed to update the screen, and was not resilient to typos and mistakes.

Other capabilities in React 0.61 include:

  • Compatibility with use_frameworks! has been fixed, making it easier to integrate React Native into iOS projects built with dynamic frameworks.
  • A useWindowDimensions hook, which automatically subscribes to dimension updates. It can be used in place of the Dimensions API in most cases.
  • React has been upgrade to version 16.9.

Accessing React Native

Instructions on getting started with React Native can be found on the project website.