Return proxy instead of snapshot in React useSnapshot hook

[saivanji]

How to subscribe on a proxy object in React and have the proxy returned as a result instead of a snapshot?

So far, I came up with the following workaround:

// Is not render optimized
const useProxy = <T extends object>(proxy: T) => {
  useSnapshot(proxy, { sync: true })
  return proxy
}

That does the trick by it's not render optimized. For instance, changing proxy.foo will produce re-render in the component which is only using proxy.bar.

Any other options/workarounds on how to achieve this?

Why we need this

We have ORM model instances which are in fact both Valtio proxies (when changing data) and snapshots (when reading). The model has methods that allow modifying its state. Here's the simplified code of how we use it:

function useModel(getModel: () => Model) {
   const model = getModel(); // model is a Valtio proxy
   const modelSnapshot = useSnapshot(model);
   return [model, modelSnapshot] as const;
}

function HomePage() {
  // it's inconvenient to return 2 instances of a model for read and write
  const [model, modelSnapshot] = useModel(() => ...);
  // would be great to have something like that and return model which can be used for reads and writes:
  // const model = useModel(() => ...);
  
  return (
    <>
      <span>{modelSnapshot.counter}</span>
      <button onClick={() => model.increment()}>Increment</button>
    </>
  )
}

[dai-shi]

Have you looked into useProxy util?

[saivanji]

Oh, I didn't realised it exists. Might be worth mentioning in docs. Would you mind if I'll open PR for that?

Also, is it render-optimised the same way as useSnapshot?

[dai-shi]

Oh, right. We didn't add it in docs. Please open a PR to fix docs.

Yes, it's render optimized. Please check the source code of useProxy if you are curious.