atomFamily & atomWithStorage deletion

[omerman]

Hello!

I found a somewhat annoying issue using atomFamily & atomWithStorage together.

Say I have this code:

import { atomFamily, atomWithStorage } from "jotai/utils";

export const FamilyAtom = atomFamily((param: number) =>
  atomWithStorage<string[]>(`FixedSongTicketsAtom_${param}`, [])
);

When I attempt FamilyAtom.remove(param), The entry at localStorage will still remain.
I can think of a couple of workarounds but I think it should be fixed natively by Jotai.
What do you think?

Thank you for the slick Library 🙏

[dai-shi]

atomFamily just provides a cache of atoms, and how atoms are defined is out of the scope. (Even if you remove an atom from a family, the atom is not removed.)

That said, it would be nice if you share some ideas, and maybe that might help some other use cases.

It feels like there's a solution without atomFamily for your case.

[omerman]

Ended up with this solution I wrote for myself.. Let me know what you think, maybe we can add this to Jotai.

import produce from "immer";
import { atom, Setter } from "jotai";
import { atomFamily, atomWithStorage } from "jotai/utils";
import { forEach } from "lodash-es";
import { differenceInDays } from "date-fns";

export const atomFamilyWithStorage = <Param extends number | string, Value>(
  storageKey: string,
  defaultValue: Value,
  MAX_AGE_IN_DAYS = 14
) => {
  const TheStorageAtom = atomWithStorage<
    Record<string, { createdAt: number; data: Value }>
  >(storageKey, {});

  const TheAtomFamily = atomFamily((param: Param) => {
    const strParam = String(param);

    const fixedIssuesAtom = atom(
      (get) => get(TheStorageAtom)[strParam]?.data,
      (_, set, updater: (current: Value) => Value) => {
        disposeOldEntries(set);

        set(TheStorageAtom, (allValues) => {
          const currentValue = allValues[strParam]?.data ?? defaultValue;
          const nextValue = updater(currentValue);

          return produce(allValues, (draft) => {
            if (!draft[strParam]) {
              draft[strParam] = {
                createdAt: Date.now(),
                data: nextValue as any,
              };
            } else {
              draft[strParam].data = nextValue as any;
            }
          });
        });
      }
    );

    return fixedIssuesAtom;
  });

  function disposeOldEntries(set: Setter) {
    set(TheStorageAtom, (allValues) => {
      return produce(allValues, (draft) => {
        forEach(draft, (entry, key) => {
          if (differenceInDays(Date.now(), entry.createdAt) > MAX_AGE_IN_DAYS) {
            delete draft[key];
          }
        });
      });
    });
  }

  return TheAtomFamily;
};

[dai-shi]

The atom family doesn't create any primitive atoms in it, so I wouldn't use atomFamily. Instead, just create an atom from param, which is garbage collectable.

[PhilipGrefe]

I'm in a similar situation where I want to create an atomWithStorage based on another atom's value. I'm trying to follow the advice to create an atom from param.

What is the recommended way to create an atomWithStorage based on another atom's value?

const fooAtom = (bar) => {
  return atomWithStorage('foo', undefined, {
    getItem: async () => {
      return (await db.query.fooTable.findFirst()
    },
    ...
  })
}

const FooComponent = () => {
  const bar = useAtomValue(barAtom)
  const [foo, setFoo] = useAtom(fooAtom(bar)) // <- causes infinite loop
  const [fooMemoized, setFooMemoized] = useAtom(useMemo(() => fooAtom(bar), [bar]))  // this works, but it feels odd to go through the UI to get the 'bar' value
  return <div>{foo}</div>
}

[dai-shi]

#2719 has a similar discussion. It's about focusAtom instead of atomWithStorage, but probably the same idea can apply.

[PhilipGrefe]

thanks - that also worked for me.

My solution with atomWithStorage:

const fooAtomInAtom = atom((get) => {
  const fooAtom = get(fooAtom)
  return atomWithStorage('foo', undefined, {
    getItem: async () => db.query.fooTable.findFirst()
    ...


const fooAtom = atom(
  (get) => {
    const fooAtom = get(fooInAtom)
    return get(fooAtom)
  },
  async (get, set, newFoo) => {
    const fooAtom = get(fooAtomInAtom)
    set(fooAtom, newFoo)
  }
)