From 'object inside a snap' to 'some type of path' (to 'the same object inside a different snap')

[DavidMulder0]

Whilst exploring the possibility of using valtio inside of a different framework I was thinking about the case where a parent component want to pass a part of the state to a child component. Let's say something like

{snap.arrayOfObjects.map((obj) => (
    <SomeComponent obj={obj}></SomeComponent>
))}

The problem though is that anytime anything else changes in the state, this will cause obj to be different, thus SomeComponent will rerender. One solution would be to always pass in the index, so

{snap.arrayOfObjects.map((obj, i) => (
    <SomeComponent obj={i}></SomeComponent>
))}

And then inside SomeComponent to go snap.arrayOfObjects[props.obj], which would work, but is messy to do in practise as you now need to duplicate the logic regarding 'where' in the store the data is in two places.

I wondered whether it would be possible (and make sense) to define a pair of functions that would work as follows:

{snap.arrayOfObjects.map((obj) => (
    <SomeComponent obj={toReference(obj)}></SomeComponent>
))}

And then inside SomeComponent do something like fromReference(snap, props.obj), where props.obj would be a primitive like 'arrayOfObjects.1'. That way SomeComponent at least doesn't need to know anything. (Plus, as an added bonus one might in practise abstract the toReference and fromReference away depending on the framework, thus making it 'just work')

Looking at the code of proxy-compare I was able to hack such a function together fairly quickly, but I really would love some input on whether the approach makes any sense at all and/or whether there are any better already existing approaches? (I tried searching around, but without much luck).

[dai-shi]

I would simply use state instead of snap.

{state.arrayOfObjects.map((obj) => (
    <SomeComponent obj={obj}></SomeComponent>
))}

and inside SomeComponent use useSnapshot. That would handle re-renders more fine-grained.

[DavidMulder0]

Interesting~! I would worry though that the mix of snap and state would be really non-self-explanatory for other devs on the team. Anyway, so you would suggest that in SomeComponent you would start with both snap = useSnapshot(state); obj = useSnapshot(props.obj);?

And what did you mean with

That would handle re-renders more fine-grained.

? If anything I would expect more overhead, even if the number of rerenders I would guess to be equal?

And thanks for the reply!!!

[dai-shi]

Yeah, I see the confusion. But understanding the separation is crucial in this lib anyway. For a team, defining naming convention would be good.

My general recommendation is if you want to pass props to children, never pass snap object. There are more pitfalls than this one. Passing primitive values or proxy objects is preferable.

Yes, unless rerenders are reduced, it's the same or a little overhead with more subscriptions.

[DavidMulder0]

But understanding the separation is crucial in this lib anyway. For a team, defining naming convention would be good.

Yeah, my thinking was to not even export the main store, 'inject' a snap to any component that needs it and pass the store to 'substores' that would contain functions that change the store.

My general recommendation is if you want to pass props to children, never pass snap object. There are more pitfalls than this one. Passing primitive values or proxy objects is preferable.

Yeah, that was exactly where the idea came from to be able to convert between snap objects and primitive values.

One last question: Would you happen to know whether there is a way to test whether something is a Proxy?

[dai-shi]

Yes, there's an api for it. https://valtio.pmnd.rs/docs/api/hacks/getVersion
It's categorized as "hack" and, in general, I don't think depending on it is a good solution.