Is conditional access to a snapshot a problem?

[scottwillmoore]

Please see my amendment below first!

I have not had time to test this, but as far as I am aware from reading the documentation of Valtio I have an edge-case which may be an issue. I did a bit of a search, and couldn't find any related issues or discussions.

To my knowledge:

A snapshot is an immutable copy (sort of...) of your proxied state, which is also proxied whereby property access is tracked. In the event of a future change to any accessed properties of the snapshot, the useSnapshot hook is will then trigger a re-render. Therefore, this greatly simplifies and automates fine-grained reactivity on your state. The Zustand approach with useStore requires a selector to be passed in to achieve the fine-grained reactivity, however this is approach is manual, and potentially non-optimal when provided with a broad selector.

Also, just to clarify, when a proxied object is modified, a new snapshot is created which to my knowledge does a sort-of shallow copy of the previous snapshot, and only applies the modified properties. Therefore, each snapshot isn't a full immutable copy of your state, it is more efficient.

Please let me know if my understanding thus far is incorrect.

The issue:

What happens in the event of conditional access to a snapshot, such as:

const snapshot = useSnapshot(state);

if (externalCondition) {
  return snapshot.x;
} else {
  return snapshot.y;
}

My mental model assumes that if our externalCondition were to change to false, then Valtio would still only know to track x, whereas it would now need to track y.

Amendment!

It is vey late, and as I have written this I have realised a flaw in my mental model. As function components are supposed to be pure, the externalCondition should therefore also be reactive (either through useState, useSyncExternalStore, etc), therefore if it were to change then the function would be called again, and Valtio would re-register that it now needs to track y. Does this also mean that Valtio now knows that x no longer needs to be tracked?

It appears to me that Valtio may be superior to Zustand in the case that it achieves fine-grained reactivity automatically, albeit maybe at a small performance cost to track accessed properties. Also, In Zustand can the selector even be dynamic? I guess you could write:

const condition = useState(true);
const slice = useStore(state => condition ? state.x : state.y);

However, even if this did work, this wouldn't be very nice in TypeScript, as the slice type would be X | Y.

Apologies for the long post. I will still submit it, as I would love to understand if I have the right mental model. It may also be useful for others who have a similar question. I am sure you have thought about these problems far more than me, therefore do you know of any related issues?

[dai-shi]

Yes, yes, and yes! It seems you understand it all correctly.

Is conditional access to a snapshot a problem?

So, the answer is no. Conditional access is not a problem, because such condition should already be reactive.

do you know of any related issues?

Maybe no such issues that discuss deeply in this repo.
The prior art is react-tracked and actually both of it and valtio use proxy-compare underneath.
I have various posts about react-tracked and former reactive-react-redux in my blog site.