Snap with no property access should trigger render only if the full snap is accessed.

[santiagopuentep]

If you have a snap and you don't access any properties, the snap will trigger re-render if anything changes. I think this is a very confusing behavior and maybe it would be better if it only re-rendered if the snap itself was actually accessed, as it happens when accessing properties.

For example, to trigger re-render when there's no property access on a snap (so it re-renders if anything changes for that snap):

const snap = useSnapshot(state);
// full snap is accessed, so triggers re-render on it, if this next line doesn't exist, no re-renders should trigger, since it's unused
snap;

Wouldn't that be more clear to explain, and also more consistent? I think that the library is amazing but has too many gotchas that are hard to keep track of with a large team.

[santiagopuentep]

Doing some tests I also see that TypeScript complains if we subscribe to only the object and not read any properties like so:

const snap = useSnapshot(state.obj)[someKey];
// TypeScript complains that snap is not used anywhere, but we need to react to the object[somekey] changing or passing from undefined to defined
<ChildComponent obj={state.obj}/>

So the only way I can think of to prevent TypeScript from complaining is to add the line snap; right after const snap = useSnapshot(state.obj)[someKey];, like my previous post suggested.

[dai-shi]

I might misunderstand the original post. So, adding snap; line changes the behavior?

If this is just a TS issue, I'd probably do like this:

const { [someKey]: _unused } = useSnapshot(state.obj);

[santiagopuentep]

You understood correctly, adding snap; doesn't change the behavior, I just posted it as another plus of having to make snap being used to trigger updates. Thanks for the TS solution, I'll use that.

[dai-shi]

If I understand it correctly, it's intended design. (tbh, I had the same misconception when I first designed react-tracked api.)

AFAIR, what we should make consistent (partly from the implementation perspective) is:

const state = proxy({ obj: {} })

// this
const obj = useSnapshot(state.obj)
// and this
const { obj } = useSnapshot(state)

[santiagopuentep]

I know that's intended by design, it's just that it was very confusing to understand and it's still very hard for a larger team remember in the long term (they will forget for sure). If snapshot was always consistent with having to access it (the snap itself or its properties) it would be much simpler to get right. It would be simply "access the snapshot or any of its properties to trigger reactivity inside the render function, and use state/proxy for everything else, writing, reading inside callbacks or to pass as props).

It might be impossible to change now that the library is out in the world, but it was only a suggestion that could help.

About this example:

const state = proxy({ obj: {} })

// this
const obj = proxy(state.obj)
// and this
const { obj } = proxy(state)

I don't understand exactly what the difference would be? The second one seems safer in case obj is not yet defined.

[dai-shi]

sorry, the previous example doesn't explain what I wanted to. let's start over.

I don't think I fully understand your confusion.

const state = proxy({ obj: {} })

  // in a component
  const { obj: _unused } = useSnapshot(state)

In this case, do you expect to trigger re-render or not with state.obj.newField = 1?

[santiagopuentep]

In that case, if I understand correctly newField would be causing a re-render, because newField changed, so it makes obj change. I think that's fine.

What I find confusing is that a snapshot, if NONE of its properties is accessed, it always re-render if any of its properties change. The confusing part is that it happens even if it is not read anywhere. It would maybe be more clear if it didn't re-render unless you read the snap itself somewhere.

But it's just an idea.

[dai-shi]

const { obj: _unused } = useSnapshot(state)
// if that ☝️ cause re-render with `state.obj.newField = 1`,
// this 👇 should do the same.
const _unused = useSnapshot(state.obj)

I don't disagree that it's a bit confusing at first (which happened to me), but this is more consistent in behavior and implementation.

[santiagopuentep]

Great, thanks for the replys.