[Perf] Small delay displaying RCTRootView after a push

[marcshilling]

I am attempting to integrate React Native into an existing Objective-C app. My goal is to replace a UIViewController's root UIView with an RCTRootView. Following these instructions https://facebook.github.io/react-native/docs/embedded-app.html, I am doing the following in viewDidLoad: of the view controller:

NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"SimpleApp" launchOptions:nil];
rootView.frame = self.view.frame;
self.view = rootView;

Everything works fine, except that there is a very small (maybe half second) delay between when the view controller is pushed and the React Native view is actually displayed. I tried pre-bundling the javascript but there was no difference. I can only assume this is because the javascript is loaded asynchronously. Is there anyway to guarantee the view is loaded so that it is immediately seen upon a push transition?

[ide]

There's an NSNotification called RCTJavaScriptDidLoadNotification that runs once the JS has finished downloading you could listen to. Alternatively you could write a native module that lets JS tell ObjC when your React view has mounted.

[marcshilling]

@ide I don't really care about knowing when the JS has finished downloading, because as far as I can tell that when will never be fast enough.

What you are suggesting is an interaction like this:

1. User taps a table view cell
2. Wait for the RCTJavaScriptDidLoadNotification to fire
3. Push detail view controller

To me, this is unacceptable. A native iOS user would expect there to be no delay between steps 1 and 3.

[ide]

I understand you want to improve perceived performance. Two things you could do (separately or together) are:

1. Immediately push a view controller that displays a loading indicator. This way the UI immediately responds when the user taps the table cell and also lets them know the app is loading content and isn't stalled.
2. Preload a hidden RCTRootView in advance, mounting an empty component just to set up the JS environment. When the user taps the table cell and you know the content to display, and the RCTRootView has successfully finished loading (known via the technique in my first post), send an event from native to JS with the data you want to display and show the RCTRootView.

[nicklockwood]

@marcshilling The JS can be preloaded by the bridge in advance of your RCTRootView being displayed. I suggest storing an RCTBridge instance in your app delegate and preloading the JS. You can then create a new RCTRootView on each tap, using the same bridge instance (via -[RCTRootView initWithBridge:]), and it should load much more quickly.

[ide]

@nicklockwood's suggestion is really clean and should work well. ++

[nicklockwood]

We should probably provide a different template for apps with multiple RCTRootViews. Or maybe just deprecate the RCTRootView convenience constructor that obscures the existence of RCTBridge.

[dsibiski]

👍 on @nicklockwood's suggestion as well. I'm using this method in an existing iOS app and it has been working wonderfully for me.

I've noticed also that even with this method, there can still be a very slight delay between when the view is pushed and when the content gets rendered. So, in some cases, I'm taking a hybrid approach. Not only do I have the RCTBridge instance in my app delegate, but I also pre-load my RCTRootViews when the calling view loads. Then, when it's time to push the rootView, it's already been loaded and there is no delay at all. Of course, this isn't feasible in all situations (might not work in a UITableView), but it does work.

[brentvatne]

@dsibiski - any interest in updating the Embedded App docs to reflect your approach? It seems like you have a good amount of experience with it 😄

@nicklockwood

We should probably provide a different template for apps with multiple RCTRootViews. Or maybe just deprecate the RCTRootView convenience constructor that obscures the existence of RCTBridge.

Should we spin this off into a separate issue?

[nicklockwood]

You might be interested in the new RCTContentDidAppearNotification in the latest release btw :-)

[cxfeng1-zz]

@nicklockwood Unfortunately the RCTBridge must be initialized on the main thread, if I preload a bridge in my app delegate, it will not only block my app's launch but also consume a lot of memory, any advice about this?

[nicklockwood]

I'm surprised that RCTBridge blocks your app loading noticably. It's true that it has to be initialized on the main thread, but most of what it does afterwards is done on a background thread.

[nicklockwood]

You can load the bridge whenever you want, it doesn't have to be at app launch time. For example, you might load it on the screen before you present your RCTRootView controller so that by the time the user presses the button to display the React view, it's already loaded the JS. You could then throw it away again if they go somewhere else in the app.

To avoid the additional delay due to the JS app initialization, you could also try pre-creating the RCTRootView off-screen, and then set it as the root of your view controller when it's presented.