Is atomFamily behavior possible?

[brandonculver]

Recoil has atomFamily which allows atoms to be created and referenced with something akin to a groupId. It seems like that kind of behavior can not be replicated without some kind string key identifiers.

[dai-shi]

Hi, nice to see this issue is opened for discussion.

https://recoiljs.org/docs/api-reference/utils/atomFamily
Reading the doc, I'm not sure if I understand groupId can reference atoms.
Oh, atoms created with atomFamily can be referenced by a name.

The base form would be something like:

const atomFamily = (initialValue) => {
  const map = {}
  return (name) => {
    if (!map[name]) {
      map[name] = atom(initialValue)
    }
    return map[name]
  }
}

[brandonculver]

Yeah, wasn't for sure if it could be accomplished so easily but I guess there is nothing preventing it.

[nksaraf]

Have worked with this api and there could be an easy way to do it.. whatever key the user plans to use can be stringified and used to cache(as a simple object) atoms. Generate new ones when an atom with a new key is requested, otherwise return the reference to a preexisting atom from the cache

[dai-shi]

Has anyone tried if it (the code snippet in #23 (comment)) really works?

[kentcdodds]

If someone wants a case study to try this with, you could see if you could port this example to jotai: https://github.com/kentcdodds/react-performance/blob/e92b1a1b61dae6f852524dfe9f8b81511a55113c/src/final/06.extra-4.js#L15-L18

[gsimone]

@dai-shi we could test this on the strand repo, I have nodes and fields that could be implemented with this 👍

[dai-shi]

https://github.com/kentcdodds/react-performance/blob/e92b1a1b61dae6f852524dfe9f8b81511a55113c/src/final/06.extra-4.js#L15-L18

const cellAtoms = atomFamily({
  key: 'cells',
  default: ({row, column}) => initialGrid[row][column],
})

So, this requires supporting function as an initializer.
And, we use Map instead.

const atomFamily = (initializer) => {
  const map = new Map()
  return (params) => {
    if (!map.has(params)) {
      map.set(params, atom(typeof initializer === 'function' ? initializer(params) : initializer)
    }
    return map.get(params)
  }
}

(Supporting async initializer would require more work..

[dai-shi]

https://github.com/kentcdodds/react-performance/blob/e92b1a1b61dae6f852524dfe9f8b81511a55113c/src/final/06.extra-4.js#L82

Ah, it's calling the function with referentially different objects.
We'd need to shallow compare (or deep compare) or stringify the params. (Is JSON.stringify safe for this purpose?)

[dai-shi]

Maybe, use https://lodash.com/docs/4.17.15#isEqual ?

import isEqual from 'lodash.isEqual'

const atomFamily = (initializer) => {
  const atoms = []
  return (params) => {
    const found = atoms.find(x => isEqual(x[0] === params))
    if (found) {
      return found[1]
    }
    const newAtom = atom(typeof initializer === 'function' ? initializer(params) : initializer)
    atoms.push([params, newAtom])
    return newAtom
  }
}

btw, is there a way to remove an atom from the family?

[brookslybrand]

Using JSON.stringify will unfortunately not work, as changing the order of the keys will technically result in a different param, whereas Recoil would consider this the same param. You can see the bug in this code sandbox. Clicking "Change me!" in the recoil button will update both atoms (really the same atom), whereas in the Jotai example it will consider them as 2 different atoms.

You can see that I commented out your solution using isEqual from lodash.isequal, and it works properly.

Only issue I see with this example is the size of lodash.isequal. I could be missing something, but adding 3.8kB doesn't seem great for this one feature.

An alternative library I've used in the past with no problems is fast-deep-equal, which is much smaller. There may be better solutions out there still.

Edit:
I hit "Comment" a little too early. I also wanted to point out the specific language in Recoil, just to make sure we match what they have (emphasis added by me):

The atomFamily essentially provides a map from the parameter to a atom. You only need to provide a single key for the atomFamily and it will generate a unique key for each underlying atom. These atom keys can be used for persistence, and so must be stable across application executions. The parameters may also be generated at different callsites and we want equivalent parameters to use the same underlying atom. Therefore, value-equality is used instead of reference-equality for atomFamily parameters. This imposes restrictions on the types which can be used for the parameter. atomFamily accepts primitive types, or arrays or objects which can contain arrays, objects, or primitive types.

[kentcdodds]

I'm a big fan of dequal which is very small (it's an intentional feature). I use it in use-deep-compare-effect and it's great 👍

[dai-shi]

Thanks SO much for doing it!

adding 3.8kB doesn't seem great for this one feature.

Didn't know it's that big.

Therefore, value-equality is used instead of reference-equality for atomFamily parameters.

OK, this is contradictory to Jotai's philosophy (= no string keys)

That said, for atomFamily, people would expect Recoil's behavior, and it's easy to use (compared to reference-equality + memoization), so using deep-equality would make sense.

---

(edit 1)

Is it too hard to write a simple deep-equal by our own?

Found another solution: https://github.com/substack/json-stable-stringify (not very small)

---

(edit 2)

const objDeepEqual = (o1, o2) => {
  if (o1 === o2) return true;
  if (typeof o1 !== "object" || typeof o2 !== "object") return false;
  const k1 = Object.keys(o1);
  const k2 = Object.keys(o2);
  if (k1.length !== k2.length) return false;
  return k1.every((k) => objDeepEqual(o1[k], o2[k]));
};

Should work for simple (JSON serializable) objects. Not sure how performant it is.