Part 1: Automatic Batching w/ React Native Fabric & React 18

This year is already starting out amazing, with two really important Release Candidates being rolled out: React Native 0.68 (with the new architecture) and React 18 (with the concurrent features).

While both of them are being rolled out separately, let’s dive deep into what can be unlocked if we use them together.

Before in React Native

Let’s take a simple example of a button that loads some data. Upon pressing the button, the ActivityIndicator is shown and the data is fetched. Pretty simple. What could go wrong, right?

React Native async code results

By closely looking at the performance tracking, we can actually see that after the results are back, the UI is rendered 2 times. why???

As we can see in the press handler, before fetching we callsetLoading and setResults and React renders only one time, but when we get back with the results and set the same states, it now does so multiple times.

The problem lies in how React 17 handles state changes in async code. It simply does not support batching, so for each state change, it automatically renders the component, which can lead to UI inconsistencies and wasted time rendering an entire three

React 18 w/ Concurrent Root

Now, React 18 promises automatic batching even in async code, but how do we go about activating it in React Native?

1. Install the latest React Native 0.68 RC npx react-native init RN68App — version 0.68.0-rc.1
2. To enable Fabric on iOS, run RCT_NEW_ARCH_ENABLED=1 pod install in the ios folder.
3. To enable Fabric on Android, add newArchEnabled=true in android/gradle.properties
4. Install React 18 by running yarn add react@rc

Even after all of this, we won’t see a change, mostly because as of now, Fabric uses the LegacyRoot and in that case React 18 actually behaves as React 17. So this final step is crucial

5. Activate Concurrent Root in iOS. In the AppDelegate.mm file, replace this line

UIView *rootView = RCTAppSetupDefaultRootView(bridge, @”RN68App”, nil);

with

UIView *rootView = RCTAppSetupDefaultRootView(bridge, @”RN68App”, @{@”concurrentRoot”: @true});

6. From Xcode, compile and run the project

Results

We now can see that both before and after state changes are automatically batched by React and React Native, thus providing a more cohesive experience and faster rendering times.

Automatic Batching

What’s Next?

As part of this deep dive, i’ll continue to explore Fabric & Concurrent Features and post findings in follow on posts.

Clap and Follow to get these updates when they get published.