Computed Properties vs derive

[alexander-entin]

Computed Property

1. Only works as expected when depending on the same object's properties only (see below code)
2. Synchronous
3. Is computed on each use via proxy
4. Is computed upon snapshotting only if the containing object has changed

derive

1. Can depend on multiple proxies
2. Asynchronous by default
3. Is computed on a dependency change

Is this correct?

If so, then most devs will start with Computed Properties, learn #1 the hard way and switch to derive.

Will it be better to deemphasize Computed Properties and promote derive? Or at least document the differences clearly.

p = proxy({
    a: { x: 1 },
    b: {
        get y() {
            console.log('computing b.y', p.a.x)
            return p.a.x
        }
    },
})
s = snapshot(p)
// -> computing b.y 1
p.a.x = 2
console.log('proxy', { ...p.a }, { ...p.b })
// -> computing b.y 2
// -> proxy {x: 2} {y: 2}
s = snapshot(p)
console.log('snapshot', s.a, s.b)
// -> snapshot {x: 2} {y: 1}  <--------------- OOOPS

[dai-shi]

I think if we use computed properties, we should use this. How does that change your understanding and example?

Will it be better to deemphasize Computed Properties and promote derive? Or at least document the differences clearly.

I don't disagree.

[dai-shi]

Also, official guide provides a very similar example

Oh, yes... It was tricky for me.
Now, I think you have good understanding, what would be your suggestion to improve docs?

[alexander-entin]

I suggest adding the following to the end of "Simple object getter" section of https://valtio.pmnd.rs/docs/guides/computed-properties
(not exact wording, but the idea):

Please note, that in the current implementation a computed property should only reference sibling properties, otherwise you'll encounter weird bugs. For example:
(and examples from #731 (reply in thread))

[dai-shi]

Looks good. Would you like to open a PR? Or, want someone to work on it instead?

[alexander-entin]

Maybe it's time to learn how to do it

[dai-shi]

Let us know if you need any help. You can take a look at previous PRs.

[ShookLyngs]

What would happen if we do this:

const a = proxy({
  type: 'a',
  address: '0x00',
});
const b = proxy({
  type: 'b',
  address: '0x01',
});
const wallet = proxy({
  instance: a,
  get type() {
    return wallet.instance.type;
  },
  get address() {
    return wallet.instance.address;
  }
});

wallet.instance = b;

[dai-shi]

it should work the same as without proxy().