Valtio does not maintain nested subscriptions when object is replaced entierly

[hellozyemlya]

Bug Description

If we have subscriptions like useSnapshot(hello.world.whatever), and if .whatever or .world.whatever is replaced like hello.world = {whatever: {puper: 10}}, this subscription will not re-render component. This causes libraries like valtio-yjs beak granular subscriptions.

Reproduction Link

https://stackblitz.com/edit/valtio-does-not-maintain-subscriptions

[overthemike]

Yes. .Valtio will use object references for comparison for value changes rather than checking property names, When you replace a property with another object, even if the property name is the same, it will have a different object reference. This is not a bug, but rather both how javascript works and how valtio decided to make perfomance important by not needing to do deep comparison on every property change.

An example of how plain javascript works...

const foo = {
  nested: {
    bar: {
      baz: 5
    }
  }
}

// if we create a new object with the same properties, they will not be "===" to eachother

// copy all property names and values to a new object
const foo2 = {...foo}
console.log(foo2 === foo) // false 

// if we just pass the objects through assignments though, they keep their references and can be compared using equality operator
const prop1 = foo.nested
const prop2 = prop1.bar
console.log(prop2 === foo.nested.bar) // true

Since you are replacing state with a newly created object referencel, it will always be different to what was subsribed to previously.

[hellozyemlya]

@overthemike yeah, I am pretty understand how it works, but that still not very convenient :) Is there some libraries\helpers\strategies to mitigate this cases? I can expect it is possible to wrap useSnapshot to another hook that will actually compare hello.world.whatever proxy instance and re-render once its changed, but maybe there is something ready-to-use?

[overthemike]

@hellozyemlya while yes it's possible to wrtie something like that, it would be a big performance hit and you can get around most cases with just changing how you write the code. Could you share a more clear problem of what you're trying to do?

[dai-shi]

It's a designed limitation.

If you replace the entire object, do this instead:

const { world: { whatever } } = useSnapshot(hello)