How to iterate over an atom family ?

[stevebeauge]

In my projects, I try to use atomFamily but I can't find how to iterate over its atoms.

The sample in the doc use both the family and a second atom that contains an array of items ID.
Which leads to a lot of boilerplate code to keep both family and "index" atom in sync.

Is there a way to avoid this extra code ? Maybe by making atomFamily iterable by exposing its internal map ?

[dai-shi]

atomFamily isn't iterable by design.
In case you want to iterate them, I think you can simply have an array on your end.

// conceptually
const myAtoms = [atom(...), atom(...), ...];

Or, Map would be fine too.

That said, my preference is atoms-in-atom pattern, as it allows to make the array reactive.

[stevebeauge]

By atoms-in-atom you mean something like this : https://jotai.org/docs/guides/atoms-in-atom#storing-an-array-of-atom-configs-in-atom ?

If I'm right, there's no atomFamily at all in this pattern?

[dai-shi]

Yes and yes.

[stevebeauge]

thx for your support.
I'll try with a atom<Map<string, MyData>> as I'll get both reactiveness and iterable (iterating over the keys of the map.

[dai-shi]

Note that if you use Map, you want to update immutably to work correctly.

// avoid this
const m = new Map();
m.set(1, 'a');

// better do this
let m = new Map();
m = new Map(m).set(1, 'a');

Of course, it's just JS code, not Jotai usage, but hope you get the idea.

[lveillard]

In case it helps, another way to do this is by creating an atom with a set of ids

idsAtom = atom(new Set());

``const myThingAtomFamily = atomFamily ...`

Update those in the same time you're updating the contents:

export const setKindsAtom = atom(null, (get, set, mythings) => {
  const currentIds = get(dsAtom);
  const newIds = new Set([...currentIds, ...myThings.map(x=>x.id)]); //generating a new one, if i'm not wrong, helps to 
  

And then use the set of Ids to iterate over the family.

I guess I could just make an atom as a map of atoms, but I'm struggling a bit to make it work like that 😅