React equivalent of subscribeKey

[zbeyens]

Is there a React equivalent of subscribeKey to subscribe to a primitive field of an object, i.e. with useSnapshot?

[dai-shi]

snapshot with useSnapshot is tracked with its key usage, so it can be said that subscrieKey is built in.

[dai-shi]

Well, both subscribe or subscribeKey can subscribe to a proxy object anyway.
So, your question is how we would make a component only re-render if a primitive field changes.

const state = proxy({ foo: 1, bar: 2 })

const Component = () => {
  const snap = useSnapshot(state) // this will trigger re-render only if `foo` is changed, it's technically like subscribeKey(state, 'foo')
  return <div>{snap.foo}</div>
}

So, it's more like subscribeKey is extracted from useSnapshot for vanilla-js use cases.

Does it make sense? Or, would you let me know how you would like to use it?

[zbeyens]

Sorry my question was not precise enough: how would I subscribe to only one primitive field? In your example, the component will re-render on bar change, which I would like to avoid.

[dai-shi]

In your example, the component will re-render on bar change, which I would like to avoid.

No, it won't. It will not re-render on bar change.

If you are interested, check out the subscribeKey code, it will subscribe to a proxy object and compare the key value. I know it's slightly counter-intuitive, and there were some discussion, but for now subscribe only works on the whole project, and it works. Implementation-wise, this makes sense and it simplifies the core.

[zbeyens]

Oh that's what the docs mean with "render-optimized", thanks for this magic!

[dai-shi]

You are welcome. If you have any suggestions on readme, please open an issue or a PR. (Keep in mind that our readme is trying to be minimal.)