What is the use case of atomFamily in recoil?

Question

I did my first experiment with recoil, building an editable table. Each cell has an atom which stores its row, column, and text value. The way I built this was by

1. initializing each cell's atom into a dictionary (just a plain object), with keys in a format of [column]x[row]
2. I then iterate over these keys in the Table component, and pass only the key to each Cell component
3. The Cell component uses useRecoilState and find its specific Atom by accessing the main dictionary using the key it got passed as a prop.

Now, it seems to me that this use case (creating thousands of related atoms with the same shape) is what atomFamily is meant to make easier, but I don't understand how to use it in this way, where you initialize each atom with a specific value.

And, besides that, I don't understand what is the advantage of using atomFamily over storing a collection of atoms. I understand there is memoization involved, but I don't understand what is getting memoized other than, if I am reading correctly, the ability to recall a specific atom by calling the function again with the same id, which would get you pretty much the same behavior I'm getting with a dictionary.

Cenac

Answer 1

There is very little difference: if you want to manually memoize and manage your own collection of atoms, then you certainly can. atomFamily is essentially just sugar for that: it handles the memoization for you, so all that you have to do is use a unique key to access each atom. Verbatim from the documentation for atomFamily:

An atom represents a piece of state with Recoil. An atom is created and registered per <RecoilRoot> by your app. But, what if your state isn’t global? What if your state is associated with a particular instance of a control, or with a particular element? For example, maybe your app is a UI prototyping tool where the user can dynamically add elements and each element has state, such as its position. Ideally, each element would get its own atom of state. You could implement this yourself via a memoization pattern. But, Recoil provides this pattern for you with the atomFamily() utility. An Atom Family represents a collection of atoms. When you call atomFamily() it will return a function which provides the RecoilState atom based on the parameters you pass in.

---

As far as examples for how to use atomFamily: beyond the documentation linked above, there are lots of existing questions and answers on Stack Overflow which already cover exactly that. Here are a couple which I have answered previously:

• Dynamic atom keys in Recoil
• Looking for a pattern to normalize state in Recoil without losing the benefit of Suspense

Embroidery

Thank you for the clarification. Could you point me to an example in which atoms in an atom family are initialized to specific values? – Lithographer

@PabloBarríaUrenda The first answer link that I shared demonstrates how to initialize atoms in an atomFamily with dynamically specified values. – Embroidery