Project feedback and handy utilities

[wojtekmaj]

Hey! I've recently migrated from Recoil to Jotai, and wanted to share some feedback as well as utilities I've made along the way to help me out with the process.

atomFamilyWithDefault

A really common pattern in my app was to asynchronously fetch an item from remote store, but also be able to write to it. While for atom we have atomWithDefault, for atomFamily - you're pretty much on your own. So I came up with this:

export function atomFamilyWithDefault<T, P>(
  getRead: (param: P) => Read<Promise<T>>,
): AtomFamily<P, WritableAtom<T | Promise<T>, [SetStateAction<T | Promise<T>>], void>> {
  return atomFamily(
    (param: P) => atomWithDefault<T | Promise<T>>(getRead(param)),
    dequal,
  ) as AtomFamily<P, WritableAtom<T | Promise<T>, [SetStateAction<T | Promise<T>>], void>>;
}

The type assertions are there to make it possible to write synchronous setters, like setItem(prevItem => ({ ...prevItem, is_active: true })). Otherwise, prevItem would need to be awaited, but in practice, you can't really (at least in my app) get a promise there. This problem also affects atomFamily, so I also have a type-asserting wrapper for it.

createJointFamily

The requirement here was to have a joint family of atoms for:

• Fetching a list of items (e.g. from /api/business/:id/items)
• Fetching a single item (e.g. from /api/business/:id/items/:itemId)

with the requirement of bothatomFamily being writable and connected. Specifically:

• A single item should not be fetched in itemAtomFamily if it was already fetched by itemsAtomFamily
• Writing a new list of items to itemsAtomFamily should update the same items in itemAtomFamily
• Writing a new list of items to itemAtomFamily should update the same item in itemAtomsFamily

Usage:

const { itemsAtomFamily, itemAtomFamily } = createJointFamily(
    (id) => () => getItems(id),
    (ids) => () => getItem(ids),
);

Source:

export function createJointFamily<
  T extends BaseRecord,
  P1 extends string | undefined = string,
  P2 extends P1 extends string ? [P1, string] : string = P1 extends string ? [P1, string] : string,
>(
  getItemsRead: (id: P1) => Read<Promise<T[]>>,
  getItemRead: (param: P2) => Read<Promise<T>>,
): {
  itemsAtomFamily: AtomFamily<
    P1,
    WritableAtom<T[] | Promise<T[]>, [SetStateAction<T[]>], Promise<void>>
  >;
  itemAtomFamily: AtomFamily<P2, WritableAtom<T | Promise<T>, [SetStateAction<T>], Promise<void>>>;
} {
  const itemMap = new Map<string, T>();

  const defaultItemsAtomFamily = atomFamilyWithDefault((param: P1) => async (get) => {
    const items = await getItemsRead(param)(get);

    for (const item of items) {
      itemMap.set(item._id, item);
    }

    return items;
  });

  const itemsAtomFamily = atomFamily(
    (param: P1) =>
      atom(
        async (get) => {
          const items = await get(defaultItemsAtomFamily(param));

          const itemsInMap = items.map((item) => {
            const itemInMap = itemMap.get(item._id);

            if (!itemInMap) {
              throw new Error(`Item not found in map: ${item._id}`);
            }

            return itemInMap;
          });

          return itemsInMap;
        },
        async (get, set, nextValueOrSetter: SetStateAction<T[]>) => {
          const nextValue =
            typeof nextValueOrSetter === 'function'
              ? nextValueOrSetter(await get(defaultItemsAtomFamily(param)))
              : nextValueOrSetter;

          for (const item of nextValue) {
            itemMap.set(item._id, item);
          }

          set(defaultItemsAtomFamily(param), nextValue);
        },
      ),
    dequal,
  );

  const defaultItemAtomFamily = atomFamilyWithDefault((param: P2) => async (get) => {
    const itemInMap = itemMap.get(param[1]);

    if (itemInMap) {
      return itemInMap;
    }

    const item = await getItemRead(param)(get);

    itemMap.set(item._id, item);

    return item;
  });

  const itemAtomFamily = atomFamily((param: P2) => {
    const itemsParam = (Array.isArray(param) ? param[0] : undefined) as P1;

    return atom(
      async (get) => {
        const item = await get(defaultItemAtomFamily(param));

        const itemInMap = itemMap.get(item._id);

        if (!itemInMap) {
          throw new Error(`Item not found in map: ${item._id}`);
        }

        return itemInMap;
      },
      async (get, set, nextValueOrSetter: SetStateAction<T>) => {
        const nextValue =
          typeof nextValueOrSetter === 'function'
            ? nextValueOrSetter(await get(defaultItemAtomFamily(param)))
            : nextValueOrSetter;

        itemMap.set(nextValue._id, nextValue);

        set(defaultItemAtomFamily(param), nextValue);

        set(itemsAtomFamily(itemsParam), (prevItems) =>
          prevItems.map((item) => (item._id === nextValue._id ? nextValue : item)),
        );
      },
    );
  }, dequal);

  return {
    itemsAtomFamily,
    itemAtomFamily,
  };
}

A simpler version, supporting only one param (for cases like a pair of APIs: /api/businesses and /api/businesses/:id):

export function createSimpleJointFamily<T extends BaseRecord, P extends string>(
  itemsRead: Read<Promise<T[]>>,
  getItemRead: (param: P) => Read<Promise<T>>,
): {
  itemsAtom: WritableAtom<T[] | Promise<T[]>, [SetStateAction<T[]>], Promise<void>>;
  itemAtomFamily: AtomFamily<P, WritableAtom<T | Promise<T>, [SetStateAction<T>], Promise<void>>>;
} {
  const { itemsAtomFamily, itemAtomFamily } = createJointFamily(
    (_param: undefined) => itemsRead,
    getItemRead,
  );

  const itemsAtom = itemsAtomFamily(undefined);

  return {
    itemsAtom,
    itemAtomFamily,
  };
}

Hope this helps anyone, whether it's the maintainers or the users :)

[dmaskasky]

This is awesome, thanks for sharing.

How has you experience been migrating?
Other than these utilities above, was there any utility or documentation you found lacking or confusing?
How did you migrate? All at once or little by little (e.g in a hybrid state for awhile).

[dai-shi]

Like, if you update it 1000 times in a loop, then it bails out with a console error or something.

Isn't it what React StrictMode doing already?

[wojtekmaj]

You'd think :D Try it!

https://codesandbox.io/p/sandbox/zft2j8

(warning: this will hang your browser)

[dai-shi]

It's not visible, but I don't want to hang my browser anyway. If it's async, React can't detect the loop.

[wojtekmaj]

Exactly why I believe it would be handy to have this safety net on Jotai side.

[dai-shi]

Yeah, I understand it. But, if it can cause without Jotai, it's better for React to fix it.
Is it possible for you to copy files to https://stackblitz.com from codesandbox?

[dai-shi]

Re: #2745 (reply in thread)

Loadables are lacking a bit when compared to Recoil ones. Particularly, I'm missing a toPromise() method, which in the past enabled me to do things like:

Before converting to loadable, it's a promise. However, useAtomValue use the promise, so you can't get it. We can avoid it by wrapping it. A workaround is something like this:

const heavyPromiseAtom = atom((get) => ({ promise: get(heavyAtom) }));

function ExportButton() {
  const { promise } = useAtomValue(heavyPromiseAtom);

  async function onClick() {
    // Heavy export operation
    const data = await promise;

    // Do something with data
  }

  return (<button onClick={onClick}>Export</button>);
}

[wojtekmaj]

Wow, that's really handy! Thank you!

[dai-shi]

Re: #2745 (reply in thread)

I did my best to illustrate the problem! Hope this helps.

TS Playground

Yeah, it explains.

    // ...but it's not. prevValue is `any`, TypeScript just bails out here. I don't blame it tbh 😅
    setWritableAtom((prevValue) => ({ ...prevValue, is_active: prevValue.is_active }));

Hm, I don't think it's possible. prevValue type can't be determined. If TS is clever, it can guess from the return type. I'm not sure if there's anything we can do.

[wojtekmaj]

I believe prevValue of a function described as [SetStateAction<Item>] | [SetStateAction<Item | Promise<Item>>] | [SetStateAction<Promise<Item>>] should be Item or at the very least Item | Promise<Item>. I just don't know how we could do it yet. I've asked Matt's TS Wizards on Discord!

[dai-shi]

If TS is capable of it, I'm pretty sure we can fix useSetAtom typing.

[wojtekmaj]

Would that work?

type SetStateAction<Value> = Awaited<Value> | ((prev: Awaited<Value>) => Awaited<Value>)

See this TypeScript Playground and go to line 90.

[dai-shi]

It's not correct because prev can be a promise.