Experimenting with React Freeze
Today we are publishing a new React package — react-freeze. This tiny library uses the React Suspense mechanism to prevent parts of the react component tree from rendering while keeping its state (both react and native view / DOM element state) untouched. This way, it makes it possible to pause updates of parts of the app that are not visible to the user at the moment, and hence shave off some rendering time.
The perfect use case for react-freeze library is navigation. When using stack navigation in React Native apps, there are a number of screen components that live in the react tree and can receive state updates, but are not visible to the user. Same applies to tab-based navigation in web or native apps — we have some, potentially complex component trees rendered for each tab, and since we only see one tab at a moment the time spent on updating invisible tabs is wasted.
Note that react-freeze does not unmount frozen components, but they will be temporarily removed from the screen and replaced by a placeholder. This is a limitation of the approach we are taking with Suspense. However, this should not be a too problematic limitation as we normally aim to freeze only parts that are not visible anyways.
This library is an experiment and even though we have tested it on a number of apps, we are still unsure if this approach is 100% right. If you are willing to try it and give us feedback there are few ways of doing so:
Using freeze library directly in React or React Native apps:
In order to use freeze the only thing you need to do is to import Freeze component from react-freeze library you can install from npm. Then, you wrap some of your components with it and pass freeze={true} when you want the re-renders to be suspended in the wrapped subtree:
Using it with react-navigation v5 or v6 (React Native):
React-navigation uses a library called react-native-screens to render screen primitives. At the level of react-native-screens library we are able to tell which “screens” are visible and which are hidden down the stack hierarchy. Thanks to that, we were able to modify react-native-screens library and add experimental support for freeze. In order to use it, the only thing you need to do is to upgrade react-native-screens to version 3.9.0 and add the below snippet in the root file of your application:
This version of react-native-screens is compatible with react-navigation v5 and v6, however, with react-navigation v5 make sure to also have the screens library enabled. This can be done by calling an additional method in the main file of your application: enableScreens(true) and by passing the detachInactiveScreens option to your navigators (stack, tabs, etc).
Where to go from here?
If you are interested in learning more, visit the project page on Github, star ⭐️ the repo, and check out the Readme!
The work on React Native Open Source projects at Software Mansion is sponsored by Shopify.
