Granular observation in Map/Array

[kevinresol]

As reference, MobX is able to do the following:

const {observable, autorun} = require("mobx");

const map1 = observable.map();

autorun(() => {
	console.log('compute');
    console.log(map1.has('foo'))
})

console.log(0);
map1.set('foo', '1'); // computes
console.log(1);
map1.set('bar', '2'); // no compute because 'bar' key is not involved
console.log(2);
map1.set('foo', '3'); // no compute because existence of 'foo' unchanged
console.log(3);
map1.delete('foo'); // computes
console.log(4);

console.log('==================')

const map2 = observable.map();

autorun(() => {
	console.log('compute');
    console.log(map2.get('foo'));
})

console.log(0);
map2.set('foo', '1'); // computes
console.log(1);
map2.set('bar', '2'); // no compute because 'bar' key is not involved
console.log(2);
map2.set('foo', '3'); // computes
console.log(3);
map2.set('foo', '3'); // no compute because value unchanged
console.log(4);

I think it is done by internally caching the request: https://github.com/mobxjs/mobx/blob/6daafc4f7930f807dd047bae1be55938e95017e5/src/types/observablemap.ts#L115-L131

[back2dos]

For map this is quite easy to do. It could indeed be implemented as a Map<Key, State<Value>>.

I wonder if we should have different data structures for different use cases.

[kevinresol]

Ya, a separate one is good, and we may want to profile them and let user know when to choose which.