How to avoid updates when "ref" property is changed?

[saivanji]

In the following code, a change on the bar property triggers the update:

const state = proxy({
  foo: 1,
  bar: ref({
    baz: 2
  })
})

It seems, ref is used when we need to ignore the updates inside the object (like, { baz: 2}).

But how can we ignore the update when the bar property changes?

[dai-shi]

Only the solution I came up with instantly is to nest it.

const state = proxy({
  foo: 1,
  barRef: ref({
    bar: {
      baz: 2
    }
  })
})

No magic, right?

[saivanji]

Yeah, but the requirement is to retain the initial object structure.

So far the solution that works for me is:

const [proxy] = unstable_buildProxyFunction(undefined, (target, handler) => {
  const set = handler.set?.bind(handler)
  handler.set = (target, p, value, receiver) => {
    if (p !== 'bar') {
      target[p as keyof typeof target] = value
      return true
    }
    return set?.(target, p, value, receiver) || true
  }
  return new Proxy(target, handler)
})

[dai-shi]

Or you can double proxy, instead of unstable_buildProxyFunction, which is not unstable.

import { proxy as origProxy } from 'valtio'

export const proxy = (obj) => new Proxy(origProxy(obj), {
  set: ...
})