⏱
Jotai の selectAtom で状態を固定する
リアルタイムで変化しつづけている 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 を改良したような雰囲気)
Discussion