Jotai’s atomFamily

[tpatalas]

I use atomFamily/selectorFamily a lot within Recoil.

Is there any recommended way to use atom with param to replace Recoil's atomFamily instead of Jotai's atomFamily? I read here and there people mentioning about that but couldn't really find it.

[dai-shi]

atomFamily is requested and inspired by Recoil users, but its design and implementation are probably different from that of Recoil.

I usually wouldn't use atomFamily much because it's mostly unnecessary in Jotai, because creation of atoms is lightweight and there are no string keys.

To help your use case, is it possible for you to create a smallest possible example to show your expectation? Maybe we can start with a simple one, like transforming one Recoil's atomFamily to Jotai's atomFamily.

[tpatalas]

Interesting. I didn't know use cases are different from Recoil. Glad I have asked question. Here are simple two different approaches I am using AtomFamily in Recoil:

First one is simple atomFamily with the combination of selectorFamily.
Second one is simple atomFamily with atomEffect.

I think these two simple examples can handle most of cases of atomFamily.

// Example: #1
export const rAtmFamItemTodo = atomFamily<Todos, Todos['_id']>({
  key: 'rAtmFamItemTodo',
  default: selectorFamily({
    key: 'selectorFamilyAtomFamilyItemTodo',
    get:
      (_id) =>
      ({ get }) => {
        const itemTodo = get(rAtmTodos).find(
          (itemTodo) => itemTodo._id === _id
        );
        return {
          ...itemTodo!,
        };
      },
    cachePolicy_UNSTABLE: {
      eviction: 'most-recent',
    },
  }),
});

// Example: #2 with Atom Effect (not sure if Jotai has a similar util)
export const rAtmFamMinimumMediaQuery = atomFamily<boolean, number>({
  key: 'rAtmFamMinimumMediaQuery',
  default: false,
  effects: (mediaQueryValue) => [
    ({ setSelf, resetSelf }) => {
      if (typeof window === 'undefined') return;
      const windowMediaQueries = () => {
        if (window.innerWidth > mediaQueryValue) {
          setSelf(true);
        } else {
          resetSelf();
        }
      };
      windowMediaQueries();
      window.addEventListener('resize', windowMediaQueries);
      return () => {
        window.removeEventListener('resize', windowMediaQueries);
      };
    },
  ],
});

[dai-shi]

#1323 (reply in thread)

Example 0: selectorFamily only

export const rAtmFamItemTodo = selectorFamily({
  key: 'selectorFamilyAtomFamilyItemTodo',
  get:
    (_id) =>
    ({ get }) => {
      const itemTodo = get(rAtmTodos).find(
        (itemTodo) => itemTodo._id === _id
      );
      return {
        ...itemTodo!,
      };
    },
});

The Jotai version would be:

export const rAtmFamItemTodo = atomFamily((_id: Todos['_id']) => atom(
  (get) => {
    const itemTodo = get(rAtmTodos).find(
      (itemTodo) => itemTodo._id === _id
    );
    return {
      ...itemTodo!,
    };
  }
));

I don't like copying the item object, so I would do:

export const rAtmFamItemTodo = atomFamily((_id: Todos['_id']) => atom(
  (get) => {
    const itemTodo = get(rAtmTodos).find(
      (itemTodo) => itemTodo._id === _id
    );
    return itemTodo || {};
  }
));

which can be simplified to:

export const rAtmFamItemTodo = atomFamily((id: Todos['_id']) => atom(
  (get) => get(rAtmTodos).find(({ _id }) === id) || {}
));

I wouldn't use atomFamily because it's not garbage collectable and can lead to memory leaks.

Because picking a todo from todos is a lightweight task, we don't even need to cache the result across components.
So, I would just create a helper function to create a derived atom:

export const selectTodoAtom = (id: Todos['_id']) => atom(
  (get) => get(rAtmTodos).find(({ _id }) === id) || {}
));

And, use it in a component with useMemo:

const Component = ({ id }) => {
  const todo = useAtomValue(useMemo(() => selectTodoAtom(id), [id]));
  ...
}

And, it's memory leak free.

[tpatalas]

Okay...It seems Jotai can reduce the amount of the code in a half of Recoil...and really love the way you do with useMemo.

[dai-shi]

#1323 (reply in thread)

Example 1: atomFamily with selectorFamily default

export const rAtmFamItemTodo = atomFamily<Todos, Todos['_id']>({
  key: 'rAtmFamItemTodo',
  default: selectorFamily({
    key: 'selectorFamilyAtomFamilyItemTodo',
    get:
      (_id) =>
      ({ get }) => {
        const itemTodo = get(rAtmTodos).find(
          (itemTodo) => itemTodo._id === _id
        );
        return {
          ...itemTodo!,
        };
      },
    cachePolicy_UNSTABLE: {
      eviction: 'most-recent',
    },
  }),
});

Jotai has only one non-configurable cache policy.

The Jotai version would be:

export const rAtmFamItemTodo = atomFamily((_id: Todos['_id']) => atomWithDefault(
  (get) => get(rAtmTodos).find(({ _id }) === id) || {}
));

assuming we don't need to copy object, and simplified.

[dai-shi]

#1323 (reply in thread)

Example 2: atomFamily with atom effects

export const rAtmFamMinimumMediaQuery = atomFamily<boolean, number>({
  key: 'rAtmFamMinimumMediaQuery',
  default: false,
  effects: (mediaQueryValue) => [
    ({ setSelf, resetSelf }) => {
      if (typeof window === 'undefined') return;
      const windowMediaQueries = () => {
        if (window.innerWidth > mediaQueryValue) {
          setSelf(true);
        } else {
          resetSelf();
        }
      };
      windowMediaQueries();
      window.addEventListener('resize', windowMediaQueries);
      return () => {
        window.removeEventListener('resize', windowMediaQueries);
      };
    },
  ],
});

Jotai doesn't have Recoil's atom effects as a design choice, but has onMount. #211

The Jotai version would be:

export const rAtmFamMinimumMediaQuery = atomFamily((mediaQueryValue: number) => {
  const boolAtom = atom(false);
  boolAtom.onMount = (set) => {
    if (typeof window === 'undefined') return;
    const windowMediaQueries = () => {
      if (window.innerWidth > mediaQueryValue) {
        set(true);
      } else {
        set(false);
      }
    };
    windowMediaQueries();
    window.addEventListener('resize', windowMediaQueries);
    return () => {
      window.removeEventListener('resize', windowMediaQueries);
    };
  };
  return boolAtom;
});

We could use atomWithReset, but not necessary in this case.

I'd prefer it a little shorter:

export const rAtmFamMinimumMediaQuery = atomFamily((mediaQueryValue: number) => {
  const boolAtom = atom(false);
  boolAtom.onMount = (set) => {
    if (typeof window === 'undefined') return;
    const windowMediaQueries = () => set(window.innerWidth > mediaQueryValue);
    windowMediaQueries();
    window.addEventListener('resize', windowMediaQueries);
    return () => window.removeEventListener('resize', windowMediaQueries);
  };
  return boolAtom;
});

[tpatalas]

Okay...this code thrills me..you can onMount with setter function. Can you even set the other atom value with onMount? In Recoil, this is extremely cumbersome jobs in atomEffect even getting the information of other atom Value. If this is too obvious question, sorry that I am not quite familiar with Jotai yet

[dai-shi]

This is another design choice I made in #211.
If you want to get or set other atom values, you need to create another atom.

const numAtom = atom(0);
const boolAtom = atom(false);
const initAtom = atom(null, (get, set) => {
  if (get(boolAtom)) {
    set(numAtom, (c) => c + 1);
  }
});
initAtom.onMount = (init) => {
  init();
};

[tpatalas]

If you want to get or set other atom values, you need to create another atom.

This is not even an issue. This is actually the design I and some others wanted in Recoil. What a beautiful work...It actually free the limitation that Recoil sets on although it has its own reason. I would much prefer the way it works in Jotai.

I still did not quite get the point of Jotai's atomFamily. I feel like I don't quite need of using atomFamily within Jotai.

I usually wouldn't use atomFamily much because it's mostly unnecessary in Jotai

Nevermind You have actually answered my wondering.

[dai-shi]

atomFamily is mostly unnecessary for use cases with that in Recoil.
However, it's still useful if developers want to avoid garbage collection and control its lifetime on their end.

const someAtomFamily = atomFamily((num) => atom(num));
const anAtom = someAtomFamily(1) // creates a new atom
someAtomFamily.remove(1) // removes it

Essentially, the atomFamily implementation is a simple helper function around Map.

// simplified code
const atomFamily = (initializeAtom) => {
  const cache = new Map();
  return (param) => {
    if (!cache.has(param)) {
      cache.set(param, initializeAtom(param));
    }
    return cache.get(param);
  };
};

It should be pretty easy for developers to create their own helper functions for their needs.