Best approach for setting multiple atoms with a single API request.

[NehrDani]

I wonder what the best approach would be to use an atomic state with single API endpoints and without creating an additional request for every single item. That would be a major problem in my case because there can be hundreds of items.
Another note, these items are completely editable and should not refetch the entire list (this comes from the ui/ux team).
I also need the single item in some cases.

I have two possible approaches. The first one would be to simply use a custom hook with an useRecoilCallback to fetch the data and set the atoms accordingly and another one for actual usage

The benefit of this approach in my opinion is, it feels really react like and is easy to follow even with less experience in recoil.
The downside is that I must add a useEffect in every hook I create that may use special selectors for like filtering or other purposes. Because the state may not be there.

const itemIds = atom({
  key: 'ItemIds',
})

const itemData = atomFamily({
  key: 'ItemData',
})

const items = selector({
  key: 'ItemData',
  get: ({get}) => get(itemIds).map(id => get(itemData(id))),
})

const useFetchItems = useRecoilCallback(({set}) => async () => {
  const items = await fetchItems()
  set(itemIds, items.map(item => item.id)
  items.forEach(item => set(itemData(item.id), item)
}, [])

const useItems = () => {
  const list = useRecoilValueLoadable(items)
  const fetchItems = useFetchItems()

  React.useEffect(() => {
    fetchItems()
  }, [fetchItems])

  return {
    data: loadable.state === 'hasValue' ? loadable.contents : undefined,
    error: loadable.state === 'hasError' ? loadable.contents : undefined,
    loading: loadable.state === 'loading',
  }
}

const useItem = (id) => {
  const list = useRecoilValueLoadable(itemData(id))
  const fetchItems = useFetchItems()

  React.useEffect(() => {
    fetchItems()
  }, [fetchItems])

  return {
    data: loadable.state === 'hasValue' ? loadable.contents : undefined,
    error: loadable.state === 'hasError' ? loadable.contents : undefined,
    loading: loadable.state === 'loading',
  }
}

The other one that would make use of a initial items selector that contains the api response and the usage of default selectors in the atoms that use the initial items selector

The benefit here seems to be that I can let recoil do all the work and don't need to handle the fetching within components.
Also I can create much more hooks this way without thinking about not yet fetched data. Especially helpful for create additional selectors with their own corresponding hook.
On the other hand it feels a bit overcomplicated.

const intialItemsData = selector({
  key: 'InitialItemsData',
  get: async () => fetchItems()
})

const itemIds = atom({
  key: 'ItemIds',
  default: selector({
    key: 'ItemIds/Default',
    get: ({get}) => get(initialItemsData).map(item => item.id)
  })
})

const itemData = atomFamily({
  key: 'ItemData',
  default: selector({
    key: 'ItemData/Default',
    get: id => ({get}) => get(initialItemsData).find(item => item.id === id)
  })
})

const items = selector({
  key: 'ItemData',
  get: ({get}) => get(itemIds).map(id => get(itemData(id))),
})

const useItems = () => {
  const list = useRecoilValueLoadable(items)
  return {
    data: loadable.state === 'hasValue' ? loadable.contents : undefined,
    error: loadable.state === 'hasError' ? loadable.contents : undefined,
    loading: loadable.state === 'loading',
  }
}

const useItem = (id) => {
  const list = useRecoilValueLoadable(itemData(id))
  return {
    data: loadable.state === 'hasValue' ? loadable.contents : undefined,
    error: loadable.state === 'hasError' ? loadable.contents : undefined,
    loading: loadable.state === 'loading',
  }
}

Both approaches have the same result. But I wonder if there are some pitfalls or other implications I'm not aware of? Or if there is a preferred way to handle this?
Other solutions are welcome too 🙏.