ProxyMap and ProxyState implementation

[tomhicks]

Hi,

I've been wanting to use proxyMap and proxySet for a while but I've always been put off because the implementations aren't very efficient. Maps and Sets have particular performance characteristics and are often chosen for those reasons, and the valtio implementation doesn't keep those characteristics due to performing many linear lookups for things.

Is there a particular reason those performance characteristics aren't maintained? I think it would require a fair amount of synchronizing data between the data arrays and a parallel structure, but I think it would be possible. It looks like the data lists are almost just a way to signal that things have changed inside the data structure.

Is this something that has been considered and rejected? If not, how would you feel about a PR that attempts to do this?

[dai-shi]

• it's very tricky to support of Set/Map, and it's technically impossible to support fully.
• we don't want to add such complexity in core, so it's "rejected" idea.
• proxyMap and proxySet in valtio/utils are emulation to provide similar API, not for performance.

We can consider a PR for valtio/utils or something, but not for valtio core. (It might be possible, because we now have unstable_getHandler.)

[fkhadra]

My 2 cents on this as I'm the one who implemented proxyMap and proxySet.

Although, I agree that the implementation is not very "efficient" at first glance. I believe that it covers 99% of use cases. There are cases where you might notice a performance issue of course, for example:

• adding like 1000 values inside a loop. I never saw something similar in any software, so I might be lucky 😆

const map = proxyMap();

// this will take around ~150ms
console.time("add 1000 to map");
for (let i = 0; i < 1000; i++) {
    map.set(i, { value: i, somehtingElse: `hello${i}` });
}
console.timeEnd("add 1000 to map");

// ~2ms 
console.time("add 100 to map");
for (let i = 0; i < 100; i++) {
    map.set(i, { value: i, somehtingElse: `hello${i}` });
}
console.timeEnd("add 100 to map");

For everything below 100, we are talking about microseconds, hence it should cover 99% of use cases.
I've been using both in production software and I never noticed any performance issue.

[tomhicks]

Our app is a mapping app with thousands of elements on screen requiring real-time updates on those in bulk. So the 1000 items in your example will hit us and 150ms is a considerable problem!

[dai-shi]

I think, in such a use case, even if we had the "real" proxy Map implementation, it would still have a considerable overhead. So, the best for performance is use ref() to avoid tracking the Map.

[promontis]

@tomhicks what did you eventually end up using?

[shamilovtim]

Throwing my two cents into the pot here. As the OP @tomhicks was saying, people choose Map and Set for, primarily, their performance characteristics. As such offering a proxyMap or proxySet should either offer those performance benefits or, alternatively, have a huge disclaimer not to use these unless you have no choice.

The docs should probably be updated to reflect @tomhicks very real concern here. On my side, I will (probably) no longer be using proxyMap as there's clearly no reason to preference a Map over an Object (or Array) here.

[dai-shi]

Please feel free to open a PR for docs.

Also, if anyone is interested, feel free to give a try to implement full Map support as a third-party library.

[promontis]

@fkhadra is proxyMap faster than a proxied object?

[fkhadra]

Hey @promontis, proxyMap is a wrapper around valtio to emulate map, so it does use a proxied object under the hood. But as @dai-shi suggested above, if performance is a concern then proxyMap is not the right tool for the job.

[promontis]

@fkhadra lets say I don't track the Map with ref()... then how to update my components in React efficiently? Like what would be right tool for the job? Like a normal Map together with a proxied mapVersion (like a number that increments when the Map changes, that we increment when updating the Map) so that we can efficiently redraw the Map?