question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Is there a recommended way to put atoms into an atomFamily

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:1
  • Comments:11 (5 by maintainers)

github_iconTop GitHub Comments

6reactions
drarmstrcommented, Sep 28, 2021
  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);
  }
});
3reactions
drarmstrcommented, Oct 23, 2020

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,
  }),
});
Read more comments on GitHub >

github_iconTop Results From Across the Web

atomFamily(options) - Recoil
key - A unique string used to identify the atom internally. This string should be unique with respect to other atoms and selectors...
Read more >
How to get all elements from an atomFamily in recoil?
You can use an atom to track the ids of each atom in the atomFamily . Then use a selectorFamily or a custom...
Read more >
How to use React-Recoil's Atom - Yaniv Beaudoin - Medium
To use the value of the atom we will use the useRecoilState hook and to set the value we will use the useSetRecoilState...
Read more >
atomFamily — Jotai, primitive and flexible state management ...
This will create a function that takes param and returns an atom. If it's already created, it will return it from the cache....
Read more >
Atoms Family Teaching Resources | TPT
I use this page for my students to put in their notebooks when teaching the structure of atoms. Subjects: Chemistry, General Science.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found