realm-js: React Native: UI is unresponsive while inserting objects

Hi!

I’m currently working on a React Native app using Realm JS which has been in production for a while now. So far everything has been working fine, however I’ve noticed that sometimes the UI is completely unresponsive while an insert transaction is being executed (both develop and production builds). This usually happens with large amounts of data, although I’ve also experienced this with as little as 50 records.

The app fetches a considerable amount of data when it first starts, this data is then stored and encrypted using Realm. The unresponsiveness can be between 2s up to 30 seconds! In the worst case users cannot do anything until Realm is done with the transaction, which can be irritating for them.

The data models being stored don’t have a particularly large number of properties. The sample repository I provide below contains sample data which resembles what’s used in reality.

Any tips on how to avoid this would be very helpful. I’ve searched around an tried multiple approaches with no luck. I’ve even tried libraries such as this: https://github.com/joltup/react-native-threads but they sometimes don’t even compile or cause additional issues to my app.

Goals

Users should be able to navigate freely and use the app normally while Realm is executing a transaction.

Expected Results

The UI shouldn’t freeze. Navigation and general app functionality should function normally.

Actual Results

The UI freezes, sometimes for noticeable long periods of time, until Realm is done inserting all records. As users need to access more data the issue becomes more noticeable and frustrating.

Steps to Reproduce

Simply running an insert transaction as follows:

realm.write(() => { sampleModels.forEach(model => { realm.create(Schema.name, model, UpdateMode.All); }); });

The problem is worse the more data records are inserted.

Code Sample

I have created a very simple React Native project which showcases the issue:

https://github.com/MHV1/RealmPerformanceIssue

The issue can be observed when pressing a button which will trigger the Realm transactions. The button animation will freeze. Attempting to press the additional button in the app while the transaction is in progress will cause no response whatsoever.

The amount of data being inserted is similar to that in the real app.

Version of Realm and Tooling

• Realm JS SDK Version: 10.4.0
• Node or React Native: React Native 0.64.0
• Client OS & Version: both iOS and Android, no specific version
• Which debugger for React Native: None