I read from different sources that mobx outperforms react renderer and are faster then redux. However if I made couple of tests it shows that adding new data to mobx observables are pretty slow. In react-native environment every milliseconds counts and it's tricky to use solution where even looping over 200 elements and filling array takes more then 100ms As I really enjoy mobx I hope someone can take a look a test code and give me some hints - what I'm doing wrong and how to improve performance.
import {observable, transaction,autorun} from 'mobx';
class Runner {
list = observable([]);
run() {
const start = new Date().getTime();
transaction(() => {
for (let i = 0; i < 200; i++) {
this.list.push({
id: observable(i),
one: observable('1'),
two: '2',
three: 3,
x: 'xxxxx',
y: 'yyyyy',
z: 'zzzzz',
z1: 'zzzzz',
z2: 'zzzzz',
z3: 'zzzzz',
z4: 'zzzzz',
});
}
});
console.log('Execution time: ' + (new Date().getTime() - start) + 'ms services ');
}
}
const runner = new Runner();
autorun(() => console.log(runner.list));
runner.run();
On my laptop it's takes about 120ms to complete. Without observable-s it's takes less then 1ms
observable
from around theid
andone
properties? (I note: you are already observing the entirelist
, which I guess is why you're usingtransaction
...?) Note: quickly browsing MobX documentation doesn't reveal any examples where they observing specific properties of objects; most examples showobservable
at the level of whole objects.observable
from around theid
and fromone
makes no difference Most notable impact seems to ba cause object size, There is big difference if object I pushing into list contains 1 or 10 properties ( 200 objects with 1 property takes ~40ms)