React Native 0.61 comes with a “quick refresh” feature

The original link

More good articles, please pay attention to the public number of knowledge small set (ID: zsxjtip)

React Native has officially released version 0.61, which includes a new reload experience with a “quick refresh.” Here’s the official explanation for the update.

Fast refresh

When we asked the React Native community for common pain points, one of the top answers was that something was wrong with the “hot reload” feature. It does not run reliably for some functional components, often fails to update the screen, and does not respond adequately to typos and errors. We heard that most people shut it down because it was too unreliable.

In React Native 0.61, we unified the existing “live reload” and “hot reload” capabilities into a new feature called “Quick Refresh.” The quick refresh was developed from scratch, following the following principles:

• Quick refresh fully supports modern React, including feature components and Hooks.

• Quick refresh will recover normally after typing errors and other errors and demote to full reload if needed.

• Quick refresh does not perform invasive code conversions, so it is reliable enough to turn on by default.

To see the quick refresh in action, read the video below.

Give it a try and let us know what you think! If you wish, you can turn it off in the development menu (Cmd + D on iOS, Cmd + M or Ctrl + M on Android). Opening and closing it is instant, so you can perform it at any time.

Here are some quick refreshes:

• By default, quick refresh is done in function components (and Hooks!) Keep the React local state in.

• If you need to reset the React state with each edit, you can add special // @refresh Reset comments to files that have this component.

• Quick refresh always reloads class components without preserving state. This ensures that it works reliably.

• We always make mistakes in code! After saving the file, Quick Refresh will automatically retry the rendering. After fixing syntax or runtime errors, you do not need to manually reload the application.

• Adding console.log or debugger statements during editing is a clever debugging technique.

Please report any problems with Quick Refresh on GitHub and we’ll keep track of them.

Other improvements

• Fixed use_frameworks! CocoaPods support. In 0.60, we made some updates to integrate CocoaPods by default. Unfortunately, this breaks the use of use_frameworks! Build. This issue has been fixed in 0.61, making it easier to integrate React Native into iOS projects that need to be built using a dynamic framework.

• Add useWindowDimensions Hook. This new Hook automatically provides and subscribes to dimension updates and can be used in place of the Dimensions API in most cases.

• React has been upgraded to 16.9. This release deprecates the old name of the UNSAFE_ lifecycle method, which includes improvements to act, among others.

Destructive update

• Remove React. Xcodeproj: In 0.60, we introduced automatic linking support through CocoaPods. We also integrated CocoaPods into our E2E test run, so from now on we have a unified and standard way to integrate RN into iOS applications. This effectively deprecates the react. xcodeProj support and the file has been removed from 0.61. Note: This will not affect you if you already use 0.60 automatic linking.