Jotai の selectAtom で状態を固定する

2023/05/19に公開

リアルタイムで変化しつづけている Jotai の Atom (仮に baseAtom とする) を使いたいけど、その Atom が一度 nullish → 非 nullish に変化したときだけ反応して、その後は変化を読み取りたくない、という場合がありますよね?

selectAtom は、第一引数の atom が変わるたびにコールバック関数を使って再計算する atom を作ることができます。

コールバック関数の第2引数 (prev) として受け取った前回の値を使うことで、以下のように、特定のケースで更新せずにキープする Atom を作ることができます。

// もとになる atom
// コントロール不能で、何度も更新されうる atom だと思ってください
const baseAtom = atom<number | undefined>(400);

const updateOnceAtom = selectAtom<number | undefined, number | undefined>(
  baseAtom,
  (current, prev) => {
    // baseAtom が更新されたとき、
    // updateOnceAtom が未だに nullish なら、値を更新する
    if (prev == null) return current;

    // updateOnceAtom が既に 非 nullish なら、値は更新しない
    return prev;
  }
);

(というより、このような使い方のために API を改良したような雰囲気)

https://github.com/pmndrs/jotai/discussions/1304#discussioncomment-4861783

株式会社ゆめみ

Discussion