Slow applySnapshot/fromSnapshot

[andriimuzh]

Hi, I am using mobx-keystone for a while on mobile (ReactNative) project and faced that applySnapshot/fromSnapshot takes too much time. On some not very powerful devices, it may take up to 10 sec what is very bad. My snapshot may contain 1500 - 2500 models and I realize that is a big amount of data but still, 10 sec is too much. Currently, I use the 0.60.2 version I tried updating to 0.64 but in spite of less snapshot-size applying takes up to 20% more time compared with the 0.60.2 version. I hope you'll help me find some solution. Thank you. "mobx": "^6.3.2" "mobx-keystone": "^0.60.2" "mobx-react": "^7.2.0"

[xaviergonz]

Could you post your models (just the props should do) + a snapshot to do performance tests?

[andriimuzh]

Sorry for the long reply. I have to change the data because of NDA, I'll provide the data shortly.

[andriimuzh]

Hi @xaviergonz, I made an example with models and snapshot. I hope you'll find it helpful. Thank you.
https://codesandbox.io/s/winter-river-h923p?file=/src/index.tsx

[xaviergonz]

thanks, I'll take a look as soon as my laptop gets fixed 👍

[xaviergonz]

@andriimuzh

https://codesandbox.io/s/infallible-hermann-in6ug?file=/src/stores/index.ts

It says it takes around 1 ms to do the applySnapshot, am I missing something?

[terrysahaidak]

Hey @xaviergonz not sure why but seems like console.time is broken.

This code shows you the problem:

  console.time("apply snapshot");
  const now = Date.now();
  console.log('apply snapshot', now);
  applySnapshot(rootStore, { ...root, ...data, $modelId: rootStore.$modelId });
  console.timeEnd("apply snapshot");
  console.log('apply snapshot', Date.now() - now);

Also, when I used CPU throttle in developer settings console.time returned me the same result as Date.now thing

[xaviergonz]

Getting around 300ms for applySnapshot, slightly less for fromSnapshot. Is that what you get too? How big is your original data that take 10 secs?

https://codesandbox.io/s/infallible-hermann-in6ug?file=/src/stores/index.ts

[terrysahaidak]

Getting around 300ms for applySnapshot, slightly less for fromSnapshot. Is that what you get too? How big is your original data that take 10 secs?

https://codesandbox.io/s/infallible-hermann-in6ug?file=/src/stores/index.ts

The problem is that you are probably testing it on your laptop. We are facing problems on mid- and low-end android devices running Hermes.

Settings CPU throttling to 4x ony MBP 15 2018 (i7 6 cores) makes it 4s for this same data.

Running it with my pixel 3 on codesandbox makes it 1.5s.

Probably the problem is that it initialize all the models at once but MST is doing it lazily.