atom#

これはユーザーのデータなどを固定値のURLを呼び出してデータを取ってくるときに使えます。

const userAtom = atom((get) => {
  const response = await fetch(new URL(...).href)
  return await response.json()
})

これはfetch中にはSuspenseのfallbackのコンポーネントが呼び出されるのでユーザーに「現在通信中である」ということを簡単に通知できます。

よって、Suspenseを利用する必要があります。

const View: React.FC = () => {
  const user: View = useAtomValue(userAtom) return (
    <p>{user.name}</p>
  )
}

で、気になるのはもしユーザー情報を更新したい場合にはどうするかということですが単純な非同期atomにはsetがないのでこれは実現できません。

要するに、一回値が入るとキャッシュが利用されてしまうので二度と更新できません。

loadable#

非同期atomの使い方の一つでSuspenseやError Boundaryを使いたくないときに使います。

基本的にはSuspenseやError Boundaryを使うと思うのでこちらは解説しません。

atomWithObservable#

rxjsと組み合わせる感じです。

const counterAtom = atomWithObservable(
  () => interval(1000).pipe(map((value) => value * 2))
);

ちょっと調べてみた感じvalueは0から順番に数値が返ってくるみたいですね。

const View: React.FC = () => {
  const [counter] = useAtom(counterAtom);
  return (
    <>
      <ModalDialog>
        <DialogTitle>Asnyc</DialogTitle>
        <DialogContent>
          <button type="button">{counter}</button>
        </DialogContent>
      </ModalDialog>
    </>
  );
};

なのでこう書くと0, 2, 4, 8という感じで一秒ごとにデータが更新されます。

unwrap#

非同期atomの使い方の一つでSuspenseやError Boundaryを使いたくないときに使います。

基本的にはSuspenseやError Boundaryを使うと思うのでこちらは解説しません。

atomWithRefresh#

const userAtom = atomWithRefresh((get) => {
  const response = await fetch(new URL(...).href)
  return await response.json()
})

これは非同期atomに対してリフレッシュ機能を提供します。

const View: React.FC = () => {
  const [user, refresh] = useAtom(userAtom)
  return (
    <button onClick={() => refresh()}>{user.name}</button>
  )
}

この場合だとボタンを押したときにuserAtomの再評価が行われ、便利なわけですね。

公式ドキュメントだとonClick={refresh}だけで更新がかかるような書き方がされていますが、Vite+Reactの環境では動きませんでした。

atomWithLazy#

ですがググっても全然出てこない上に公式ドキュメントも良くわからないのでスキップします。

atomWithReset#

初期値を再代入するためのatomです。

RESETという特別な値を入れることで初期化できます。

これもドキュメントが良くわからないのでまだ使えていません。

atomWithDefault#

再代入かつ初期化できるatomです。

const count1Atom = atom(1);
const count2Atom = atomWithDefault((get) => get(count1Atom) * 2);

例えばこう書いたとすると初期値はそれぞれ1と2になります。

ただ、count2Atomの初期値がcount1Atomの二倍にしたいのであれば、

const count1Atom = atom(1);
const count2Atom = atom((get) => get(count1Atom) * 2);

こう書いても同じ結果が得られます。ただし、これはReadOnlyなatomなので再代入ができません。

const View: React.FC = () => {
  const [count1, setCount1] = useAtom(count1Atom);
  const [count2, setCount2] = useAtom(count2Atom);

  return (
    <div>
      count1: {count1}, count2: {count2}
    </div>
    <button type='button' onClick={() => setCount1((c) => c + 1)}>
      increment count1
    </button>
    <button type='button' onClick={() => setCount2((c) => c + 1)}>
      increment count2
    </button>
    <button type='button' onClick={() => setCount2(RESET)}>
      Reset with RESET const
    </button>
  )
}

こう書くとcount2を変更しない間は初期値が利用されるのでcount1を増加させるとその二倍の値がcount2として設定されます。

そこからcount2だけを増加させるとcount1を増やしてもこれら二つは同期されなくなりますが、リセットを実行するとcount2はcount1の値の二倍(初期値)に戻ります。

const [count2, setCount2] = useAtom(count2Atom);
const resetCount2 = useResetAtom(count2Atom);

という風に定義すればresetCount2()とsetCount2(RESET)は同じ効果を持ちます。

atomFamily#

atomFamilyは引数を受け取ってatomを返すメソッドを提供します。

type User = {
  name: string
  age: number
}
const usersAtomFamily = atomFamily(
  ({ name, age}: User) => atom({ name: name, age: age}),
  (a,b) => a.name === b.name
)

これは無名のatomを生成し、Jotaiの内部状態として保存します。よって、外部からatomの管理をしなくていいというのが便利です。

const usersAtom = atom<User[]>([])

じゃあこれと変わらないんじゃないかと思うかもしれませんが、atomFamilyの場合はそれぞれ個別のatomを保存しているため要素の一つの値が変化したときにその値に関するコンポーネントだけ再レンダリングが走ります。

それに対して要素の配列自体をatomに入れた場合はどれか一つの値が変わると全ての要素に関するコンポーネントが再レンダリングされるため、例えば要素が100あるatomが変化したとき前者では変化したatomの分だけしかコンポーネントが変化しませんが、後者の場合は全てのコンポーネントが再描画されるため動作が重くなるなどの懸念が発生します。

よって、配列の一部が変化する可能性がある変数をatomとして管理する場合にはatomFamilyを利用したほうが効率が良いことがあります。

唯一困る点としてはatomFamilyは保存している内部状態全ての値を一度に取得するプロパティがありません。

よって、もし全件をループしてコンポーネントとして表示したい場合には保存しているatomのユニークなキーを別のatomとして保存しておく必要があります。