Is there a recommended way to put atoms into an atomFamily
See original GitHub issueI 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:
- Created 3 years ago
- Reactions:1
- Comments:11 (5 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
You can use
set
’s in auseRecoilCalback()
in a loop or async.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.: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: