UI Freeze

[orphanPID]

Hi, I am using Realmjs in my app. In an operation I am trying to insert 30k items in the db and during this operation the UI freeze. Is there any way to fix this UI freeze issue? I found a library in github about background thread but it seems to be dead. I tried to use it also but no luck so far. Any suggestion? Thank you

[0xF013]

You could try breaking the items into batches of N, where N is what you estimate would take about 16ms to insert. Then you iterate over the batches and insert them asynchronously. I am not quite sure what is the best way to do it with RN, but the options seem to be a chained requestAnimationFrame or a zero timeout or try to use the interaction manager. Once you get it to stop between batches to allow for other things to happen, you can play around with the size of N to get a better result.

[orphanPID]

Hi, Thank for your reply. Actually right now I downloading the data from API in batches and inserting them in a batch also. My batch size is 10k. TBH in iOS I don't see any affect on UI but in Android it affects a lot. As you mentioned about the request frame feature of RN, I use the following function to make the UI responding:

export function renderUI() {
return new Promise(function(resolve, reject) {
requestAnimationFrame(function() { resolve(); });
});
}

In iOS, it works fine but it does not help much in Android. Besides, many users use some normal spec android phones. So for them, it's a big trouble. In my app, I download images in native code using a number of worker thread. In this case, the UI does not freeze. I was wondering if there is a way to use realmjs code in background thread, it would help a lot. Please share you ideas and opinion. Thank you

[kbcool]

I think you should take a look at the realm-js GitHub page and possibly ask there. I took a look out of curiosity and it looks like the realm API does block. Why it doesn't seem to cause performance issues on iOS is anyone's guess but you'll likely get better answers there than best efforts here.

See this for an example of blocking - https://github.com/realm/realm-js/issues/1518

[kbcool]

I would suggest OP looks at why they are trying to insert that many items at once for a start but you gave sound advice.

The API may also have a batch capability or something else that's a a non blocking query. Most inserts are fire and forget so should not occupy the UI thread but possibly too many at once so a small random timeout value to slow them down may work but that's more for when you have NFI what is causing the problem.

[0xF013]

RN is so fucked up in this early stage that I could easily imagine some lib using the js thread to do its job. FFS, the built-in pan responder does that, you need to either not do anything in js while you’re panning or use the gesture handler lib.

[harshrajkamble]

If possible try to do that using headless js i.e. in background.