nested computed getters unexpected

[magicdawn]

CSB
https://codesandbox.io/s/valtio-countdown-to-do-list-forked-c4bii0?file=/src/App.tsx

valtio has deprecated proxyWithComputed and recommend use getter to implement computed.
I never read the source code of proxyWithComputed, but a lot with getter computed because I'm troubled.

useSnapshot

normal case if our code is using useSnapshot.

• after any field change
• decide whether snapshot has changed
• call snapshot()
• this will run all get xxxgetter(){ }

getters are evaluated frequently, so we need cache.

cache is hard

recommend way

import {memoize} from 'proxy-memoize'

const _c = memoize(snap => snap.a + snap.b)

const store = proxy({
  a: 1,
  b: 2,
  get c() {
    return _c(snapshot(store))
  }
})

this pattern has unexpected when computed nested

const _x = memoize((snap: any) => snap.y * snap.y);
const _y = memoize((snap: any) => snap.a + snap.b);
const _z = memoize((snap: any) => snap.y * snap.y); // _x same as _z

const store = proxy({
  a: 1,
  b: 2,
  get x() {
    console.log("calculating x");
    return _x(snapshot(store));
  },
  get y() {
    return _y(snapshot(store));
  },
  get z() {
    return _z(snapshot(store));
  }
});

for x, inside get x(){} snapshot(store).y is undefined because inside snapshot() use Reflect.ownKeys(target).forEach((key) =>{}), x index smaller than y

for z, inside get z(){} snapshot(store).y has value, but still NaN in snap.y

https://codesandbox.io/s/valtio-countdown-to-do-list-forked-c4bii0?file=/src/App.tsx

with [email protected]

with [email protected]

I have tried remove snapshot() in getters and manualy select dep like store.y, make snapshot(dep), and use plain memoize-one, but snapshot() is not smart enough.
if store.y returns a array, in x or z, store.y switchs between Proxy target an Array and An array of Proxied Items. snapshot() fails on An array of Proxied Items.

SO I end up with no cache. Can't make things work with cache 😂

[dai-shi]

Sorry for the confusion.
You have to pass a snapshot object to a memoized function.

  import {memoize} from 'proxy-memoize'
  
  const _c = memoize(snap => snap.a + snap.b)
  
  const store = proxy({
    a: 1,
    b: 2,
    get c() {
-     return _c(snapshot(store))
+     return _c(snapshot(snapshot(store)))
    }
  })

[dai-shi]

My bad totally. I was sleeping probably.

[magicdawn]

looks like the double snapshot not working

[dai-shi]

Wow, what did I do? My ignorance. Please forget about it...

[dai-shi]

Re-reading the description, I think nested computeds are not supported now.
Does it work with deprecated proxyWithComputed?

Maybe a workaround is to use derive instead, but it may not be very handy.

[magicdawn]

proxyWithComputed can not be used as nested

(alias) function proxyWithComputed<T extends object, U extends object>(initialObject: T, computedFns: { [K in keyof U]: ((snap: Snapshot<T>) => U[K]) | {
    get: (snap: Snapshot<T>) => U[K];
    set?: ((state: T, newValue: U[K]) => void) | undefined;
}; }): T & U

snap is Snapshot ...

---

AND derive works.

Thanks for reply.

[ssijak]

can it be written like this @dai-shi ?

import {memoize} from 'proxy-memoize'

const store = proxy({
  a: 1,
  b: 2,
  get c() {
    const _c = memoize(snap => snap.a + snap.b)
    return _c(snapshot(store))
  }
})

or const _c = memoize(snap => snap.a + snap.b) needs to be outside of the getter?

[dai-shi]

yeah, memoize should be outside of the getter.