Declaratively resetting atom on another atom's change using keyedAtom

[probeiuscorp]

I've often wanted to reset an atom when another atom changes, for example resetting the page number when the query changes. I believe this is the only pattern I've seen do this declaratively. This is sort of a continuation of #2136 and #2239 and the abilities of stable().

The first ingredient is stable(), a convenience wrapper around WeakMap and sort of like a weak atomFamily:

export function stable<T extends object, V>(make: (value: T) => V) {
  const cache = new WeakMap<T, V>()
  return (value: T): V => {
    const held = cache.get(value)
    if(held === undefined) {
      const made = make(value)
      cache.set(value, made)
      return made
    } else return held
  }
}

For example, given const getID = stable(() => nanoid()), getID will always return the same string for the same object without leaking memory.

The second ingredient is redirectedAtom (looks a bit like a monad join!):

export function redirectedAtom<T extends Atom<unknown>>(getAtom: (get: Getter) => T): T {
  return atom((get) => {
    return get(getAtom(get))
  }, (get, set, ...args) => {
    return set(getAtom(get), ...args)
  })
}

redirectedAtom behaves like the atom its pointing to, so

const globalSettingsAtom = atom(createDefaultSettings())
const userSettingsAtom = atom(createDefaultSettings())
const useGlobalSettingsAtom = atom(true)
const settingsAtom = redirectedAtom((get) => get(useGlobalSettingsAtom) ? globalSettingsAtom : userSettingsAtom)

The final ingredient is keyedAtom (looks a bit like a monad bind!):

export function keyedAtom<T extends object, V extends Atom<unknown>>(anAtom: Atom<T>, makeAtom: (value: T) => V): V {
  const getAtom = stable(makeAtom)
  return redirectedAtom(anAtom, (get) => get(getAtom(get)))
}

Put all together, it can be used like:

const startTimeAtom = atom(null)
const endTimeAtom = atom(null)
const queryAtom = atom((get) => ({ startTime: get(startTimeAtom), endTime: get(endTimeAtom) }))
const pageAtom = keyedAtom(queryAtom, () => atom(0))

(example in codesandbox)

[dmaskasky]

You can use atomEffect for this.

https://jotai.org/docs/extensions/effect