Performance issue with snapshots on a very large state.

[guillaumebrunerie]

I'm trying to use Valtio, but I am having some performance issues with the snapshot function, so I would like to understand better how it works with nested objects. Consider the following code:

import {proxy, snapshot} from "valtio";

const object = {
  a: Array(10000).fill(null).map(() => ({a: 0, b: 1})),
  b: {c: 0},
};

const state = proxy(object);

const snap1 = snapshot(state);

state.b.c = 10;

debugger;
const snap2 = snapshot(state);

What I would expect is that the second snapshot should shallow clone object and object.b, but leave object.a alone.
But when stepping through it in the debugger, the ensureVersion function seems to still go through all the 10000 elements of the object.a array.

Is that really necessary? I thought that given that nothing changed inside object.a, there should be no need to go through it at all, not even to update any version numbers (as the version number of object.a should suffice). But I might be misunderstanding how it works.

I’m experimenting with replacing Redux with Valtio in a complicated app with a very large state and very frequent changes, I replaced useSelector by a custom hook that calls useSnapshot instead, but every snapshot seems to take at least several hundreds milliseconds to make, and I have a lot of useSelector calls, so the app doesn’t even start at all, the page is just frozen, and every time I pause the debugger to see what is going on, it is always inside a long call stack of ensureVersion calls.

[dai-shi]

If the state is subscribed, we know what property is charged. Otherwise, it's not tracked and we need to recursively check if anything is charged.

I think such cases are covered by tests, so feel free to play with it.

[dai-shi]

I mean if we have a more performant solution, it would be nice.