Realm-js: Realm JS with React Native freezes UI.

Created on 5 May 2017 · 9Comments · Source: realm/realm-js

I want to use RealmJS with React Native for an offline first chat app but it looks like it's very slow.
A single write to the db on message send results to a UI freeze.
Is there a work around to mitigate UI freezes on db writes?

T-Help

Source

Kabangi

👍7

Most helpful comment

@Kabangi According to the docs:

Write transactions incur non-negligible overhead - you should architect your code to minimize the number of write transactions.

In your example you are creating a loop that is calling realm.write 200 times.

Try refactoring your code so you are adding all messages inside one write transaction

Example:

realm.write(() => {
    for (let i = 0; i < 200; i++) {
        realm.create('Messages',message,true);
    }
});

kerryaustin on 8 May 2017

👍2 🎉1

All 9 comments

Hey @Kabangi,

Are you running your app in the Chrome debugger? Realm's performance is impacted when running with a JS debugger attached.

fealebenpae on 5 May 2017

No am not. Even on a release build I can notice the freeze.

Kabangi on 5 May 2017

Could you please share a minimal app that exhibits the issue so we can check it out? Also please let us know what platform this occurs on and whether it's a device or simulator.

fealebenpae on 5 May 2017

@fealebenpae Thanks for your response. The issue occurs on:-

Android 6.0 (device),
React Native 0.43.4
[email protected]

I think this issue is also related to this issue https://github.com/realm/realm-js/issues/836 and this stack overflow question http://stackoverflow.com/questions/42817413/realm-js-speed-with-react-native.

Concerning a minimal app let me try to put together a quick example and share the link.

Kabangi on 5 May 2017

Here is a very minimal app as agreed. https://github.com/Kabangi/react-native-realm-poc

Kabangi on 5 May 2017

@Kabangi According to the docs:

Write transactions incur non-negligible overhead - you should architect your code to minimize the number of write transactions.

In your example you are creating a loop that is calling realm.write 200 times.

Try refactoring your code so you are adding all messages inside one write transaction

Example:

realm.write(() => {
    for (let i = 0; i < 200; i++) {
        realm.create('Messages',message,true);
    }
});

kerryaustin on 8 May 2017

👍2 🎉1

@kerryaustin You are right changing the sample app as suggested by you improves performance significantly. Will refactor my code to see if I can get better performance. Thanks.

Kabangi on 9 May 2017

If you guys really need to have a lot of transactions, another solution is: https://github.com/joltup/react-native-threads.

You can move the realm code for a "worker".

franzejr on 23 Feb 2018

In my case I am calling realm.write once only as suggested by @kerryaustin . I am trying to insert 25k records, where each record has 30 properties. In short I am calling realm.create 25k times. Is this the correct way ?

It is taking around 30 seconds on Samsung Galaxy A10 device and also UI freezes temporarily when the write operation is being run

Is 30 seconds normal for 25k records ?