Is there a recommended way to put atoms into an atomFamily

I was recently discovering recoil to manage an entity store like redux with normalization, I think atomFamily is a best to manage entities identified by a unique key:

const todosState = atomFamily({key: 'entities/todo', default: null});

I then encountered an issue where I have already fetched a list of todos and want to put them into this atom family:

const todosState = atomFamily({key: 'entities/todo', default: null});
// Containes ids of todo for current list
const todoKeysState = atom({key: 'todo/keys', default: []});

const TodoItem = ({id}) => {
    const todo = useRecoilValue(todosState(id));

    return (
        <li>
            {todo.text}
        </li>
    );
};

const TodoList = () => {
    const [todoKeys, setTodoKeys] = useRecoilState(todoKeysState);
    useEffect(
        ()  => {
            (async () => {
                const todos = await fetch('/api/todos');
                setTodoKeys(todos.map(t => t.id));
                for (const todo of todos) {
                    // How to put this into todosState?
                }
            })();
        },
        []
    );

    return (
        <ul>
            {todoKeys.map(k => <TodoItem key={k} id={k} />)}
        </ul>
    )
};

Although I can fallback to use a single atom to store all todos and use selectorFamily to reach each todo item, its performance can’t satisfy me.

[drarmstr]

  set(itemsFamily(props.id), valueFromQuery);

How can we implement this set function? Since useSetRecoilValue is a hook that cannot be called in loop or async callback, imperative set seems impossible to me

You can use set’s in a useRecoilCalback() in a loop or async.

const setListItems = useRecoilCallback(({set}) => listItems => {
  for (const item of listItems) {
    set(itemsFamily(item.id), item);
  }
});

[drarmstr]

Atoms in an atomFamily() are created on first-use. So, you can set the value of the atom when parsing the query if you’re handling that imperatively, e.g.:

  set(itemsFamily(props.id), valueFromQuery);

If you want to hook it up so the items automatically query for their default values and have a pending state while the query is pending, you could use a selectorFamily() as the default:

// query that returns an object of Item IDs to initial values
const initialItemValuesQuery = selector({
  key: 'InitialItemValues',
  get: ({get}) => ...fetch object of initial item values...
});

const itemsFamily = atomFamily({
  key: 'Items',
  default: selectorFamily({
    key: 'Items/Default',
    get: id => ({get}) => get(initialItemsQuery).id,
  }),
});