useAtomによるAtomの読み書き

useAtom(someAtom)は、useState APIを踏襲した[value, setter]を返します。valueは現在のatomの状態で、setterはその状態を更新します。コンポーネントがatomの読み取りと書き込みの両方を行う場合に使用します。

setterには新しい値または更新関数を渡せます：setCount(c => c + 1)。

useAtomValue(someAtom)は現在の値だけを返し、setterは返しません。状態を読み取るだけで変更しない、表示専用のコンポーネントで使用します。

コンポーネントがsetterへの参照を保持しないため、コード上でも意図が明確になります。このコンポーネントは純粋な読み取り専用です。

useSetAtom(someAtom)はsetter関数だけを返します。重要なのは、コンポーネントがatomの値を購読しないことです。atomが変更されても、コンポーネントは再レンダリングされません。

状態の変更をディスパッチするものの、派生したUIを表示しないボタンのような、アクション専用のコンポーネントで使用します。

useSetAtom(countAtom)を呼び出してカウンターを増加させるコンポーネントは、値の購読を持たないため、countAtomが変更されても再レンダリングされません。再レンダリングされるのは、countを表示するコンポーネントだけです。

これはシンプルですが強力な最適化です。書き込み側と読み取り側を分離して、連鎖的な再レンダリングを防ぎます。

jotai/utilsからatomWithStorageをインポートします。atom()と同じように使用しますが、最初の引数としてストレージキーを渡します：atomWithStorage('theme', 'light')。atomはlocalStorageと自動的に同期します。

ページを再読み込みすると、atomはlocalStorageからハイドレーションされます。atomを読み取るすべてのコンポーネントが、永続化された値をすぐに取得します。

jotai/utilsのRESETシンボルを、atomWithStorageで作成したatomのsetterに渡せます：setter(RESET)。これによりlocalStorageのエントリが消去され、atomが初期値にリセットされます。

ログアウト処理や、設定ページの「デフォルトに戻す」ボタンで役立ちます。

jotai/utilsのatomFamilyは、パラメーター化されたatomを返すファクトリを作成します。たとえば、atomFamily(id => atom(null))は、渡された一意のidごとに個別のatomを作成します。

selectedAtom(itemId)やexpandedAtom(rowId)のようなアイテムごとの状態に適しています。単一の大きなmap atomを管理する必要はありません。

IDが蓄積すると、atomファミリーは際限なく増大する可能性があります。atomFamily.setShouldRemove((createdAt, param) => ...)を使用して、古くなったファミリーメンバーを削除するかJotaiが判断する際に使うクリーンアップ条件を定義します。

アイテムが追加・削除されるリストでは、メモリリークを防ぐため、アイテムの削除時にatomファミリーのエントリも必ずクリーンアップしてください。

jotai-devtoolsパッケージは、アクティブなすべてのatomと現在の値を一覧表示するビジュアルパネルを提供します。インストールしてアプリをDevToolsでラップすると、atomの状態をリアルタイムで確認できます。

各atomの更新は変更前と変更後の値とともにログに記録されるため、複雑なatom間のやり取りも簡単にデバッグできます。

大きなリストでは、ListContainerコンポーネントがuseSetAtom(selectedIdAtom)を使って、selectedIdAtomを購読せずに選択状態を更新できます。選択が変更されたときに再レンダリングされるのは、useAtomValue(selectedIdAtom)を呼び出す個々のListItemコンポーネントだけです。

このパターンは拡張性に優れています。リストアイテムを数千個追加しても、選択状態の更新が遅くなりません。

コンポーネントの目的に合ったフックを選択します。純粋な表示にはuseAtomValue、純粋なアクションにはuseSetAtom、両方が必要な場合にはuseAtomを使用します。この意図的に設計されたAPIにより、コンポーネントの責務が一目で明確になります。

フォームフィールドのコンポーネントでは通常useAtomを使用し、送信ボタンではuseSetAtomを使用し、countを表示するラベルではuseAtomValueを使用します。

useAtomの代わりにuseSetAtomを使用する主な利点は何ですか？

useAtomは値とsetterの両方を提供し、useAtomValueは値だけを提供して読み取り購読を行い、useSetAtomはsetterだけを提供して値の変更時には再レンダリングされません。atomWithStorageはRESETに対応しながらlocalStorageに値を永続化し、atomFamilyはパラメーターごとのatomを動的なリスト向けに作成します。

適切なフックを選ぶことで、不要な再レンダリングを最小限に抑え、コンポーネントの意図を明確にできます。