When to utilize selector vs useRecoilCallback

[theahura]

Hey folks,

Had a usage/best practices question. From what I can tell, selectors and useRecoilCallback can be used to do very similar things. For example, adding many items to an atomFamily:

const addManyItemsToFamily = selector({
    key: 'addManyItemsToFamily',
    set: ({ set }, items) => {
      for (item of items) {
        set(itemFamily(item.id), item);
      }
    },
});

...
const addManyThings = useSetRecoilState(addManyItemsToFamily);
useEffect(() => {
  addManyThings([...])
}, [])

vs

const setItems = useRecoilCallback(({ set }) => (items) => {
  for (const item of items) {
    set(itemFamily(item.id), item);
  }
});
...
useEffect(() => {
  setItems([...])
}, []);

When should I prefer selectors to callbacks? In general what is the difference?

[drarmstr]

Selectors are meant to provide a view of state derived from other Recoil state, i.e. other atoms and selectors. They also provide a set mechanism so they can act as abstractions for other atoms/selectors. For example, you could have an atom for the current temperature in degrees F with a wrapper selector in degrees C. If the wrapper selector provides a set which converts back to F to update the atom it allows you to provide the temperature in either F or C and allow the user to read or write from either one while only having a single source-of-truth for the state.

If you are not dealing with reading derived state, then you don't really need a selector and it just adds additional overhead. You should not create selectors without a get option. For those cases when you just want a transaction of set actions you can use useRecoilTransaction_UNSTABLE() or useRecoilCallback()