Avoid re-rendering components if selector value hasn't changed.

tl;dr: if an atom is an object and a selector returns a single property from that object, will downstream components re-render whenever ANY part of the atom changes, or only when that selector value changes? i.e. are selector output values cached or do re-renders occur whenever any of their input dependencies change? (I suspect the latter?).

If recoil doesn’t cache selector output, then I suspect my best approach is useRecoilCallback to avoid subscribing, then have something like useStateSlice() which takes a slice fn() which triggers component updates (useState/setState) when the slice value differs?

seem right?

---

background:

This arises from a common(?) case:

The “atom” in my case is a (firebase) document which is basically a property bag of fields. We get async updates from firebase when that data is changed (possibly external to our app - e.g. by another user, etc.).

So if my atom is the document, I (think?) I’m hosed - any update to any field of the document will cause all downstream selectors to update and therefore all components depending on ANY part of the document to re-render.

What I’d like is to think of selectors as a “slicing” the data, so I could have a lastName selector which picks the lastName field out of the Person document. Components depending on lastName would update only when that field is different, ignoring changes to other parts of the person.

[drarmstr]

Yup, I agree that we really want to do this.

[drarmstr]

Yes, it’s on our roadmap to have selectors suppress downstream updates and subscriptions if their computed value has not changed. I already have a diff for suppressing updates if setting an atom to the same value.