[Tips] useSelector equivalent

While the atom model fits with bottom-up approach (composing small atoms), we could create a big atom and select pieces out of it.

const bigAtom = atom({
  num: 0,
  str: 'hi',
  bool: true,
  obj: { a: 1, b: 2, arr: [3, 4, 5] },
})

const numAtom = atom(
  get => get(bigAtom).num,
  (get, set, update) => {
    const prev = get(bigAtom)
    const num = typeof update === 'function' ? update(prev.num) : update
    set(bigAtom, { ...prev, num })
  }
)

  const [num, setNum] = useAtom(numAtom)

We can make this a hook. Let’s try for a read-only atom.

const useSelector = (anAtom, selector) => {
  const selectedAtom = useMemo(() => atom(get => selector(get(anAtom))), [anAtom, selector])
  return useAtom(selectedAtom)[0]
}

[dai-shi]

No, your useNumValue updates only if num is changed. This is because the useSelector creates a new derived atom in it. Happy to help you for better understanding.

---

btw, useSelector requires useCallack for selector

const useNumValue = useSelector(bigAtom, useCallback((s) => s.num, []))

Or, define the selector outside render.

[dai-shi]

useSelector here is just to show the possibility, and I’m not sure if there’re real use cases.

Yes, the derived atoms work like recoil’s selector. They are only recalculated if one or more of its dependencies change.