Why not use proxyWithComputed with React?

[GollyJer]

From the docs...

You can have computed values with dependency tracking with property access. Dependency tracking in proxyWithComputed conflicts with the work in useSnapshot. React users should prefer using derive.

I'm trying to transition from easy-peasy but finding computed/derived values confusing. I was hoping to have the ability to useSnapshot on a piece of state with the ability to access all its values and computed/derived values.

How do you hang derived state off a state proxy object? It says "prefer" does this mean it will break or is it a subtle issue?

Is what I am hoping for not easily possible with Valtio and React?

[dai-shi]

It says "prefer" does this mean it will break or is it a subtle issue?

It doesn't break. It's just that the combination of proxyWithComputed and useSnapshot is not computationally super efficient. And, it's counter-intuitive from the user perspective, thus there's the strong warning message.

Would you please explain what is your confusion and how you would expect for the transition? A small code snippet would help.

[GollyJer]

Hey @dai-shi. Thank you SO MUCH for these state management packages and for being so active in the community. It's a true feat. I'm not convinced you aren't a robot from the future. 😀

---

I put together a codesandbox showing how I interpret computed and derive are intended to be used. I thought by "not computationally super efficient" maybe you meant it would cause more re-renders than necessary but even with computed and derived state on the page the render count is as expected.

Do you mean it causes more computation inside Valtio itself so it's slower to calculate state changes?

[dai-shi]

Here's the modified codesandbox:
https://codesandbox.io/s/react-valtio-computed-state-forked-jb3rc?file=/src/App.tsx

Basically, you want to use useSnapshot to read proxy states in render function, to make it reactive.
Reading proxy states is possible and can be used for hacky optimization (sometimes called transient updates.)

it would cause more re-renders than necessary

No, it won't cause more renders. Hm, actually, using derived may cause more renders depending on the usage.
What I mean by not super efficient is that snap used in proxyWithComputed is wrapped with a proxy for usage tracking. This is same as how useSnapshot works.
So, in an extreme case, if you have one proxyWithComputed and one useSnapshot, it will be slower than one proxy and one useSnapshot.

Having all that said, these performance discussions are rather hypothetical, so unless we measure it, we don't know.
The difference is rather explained for people who cares the cost of Proxies, if what you care is about re-renders, the difference would be very little.
In summary about how those functions use proxies:

• proxy() uses proxies to detect mutation.
• useSnapshot() uses proxies to detect usage.
• proxyWithComputed() uses both proxies to detect mutations and proxies to detect usage on computed properties.
• derive() doesn't use proxies at all.

Now, I feel like there's room for improvement in docs...

[GollyJer]

Thanks again. I'm starting to wrap my head around things.
My next challenge was adding persistence. In that case I found it was better to proxy's and derive along with some clever organization of files and import/exports to land on a good api for the app's state. I'll post about it next. I think I'm ready to add valtio as a replacement for easy-peasy in our react-native app.