派生Atomと非同期Atom

getter関数を渡して派生atomを作成します：const doubleAtom = atom(get => get(countAtom) * 2)。このatomは値を保持せず、countAtomが変更されるたびに再計算されます。

派生atomは手動で同期しなくても常に最新の状態になります。Jotaiにおけるcomputed propertyに相当します。

Jotaiはgetter関数内でアクセスされたatomを追跡し、そのいずれかが変更されると派生atomを自動的に再評価します。依存関係を明示的に宣言する必要はありません。

getterがget(atomA)とget(atomB)を呼び出す場合、atomAまたはatomBのどちらかが変更されると派生atomが更新されます。

書き込み可能な派生atomにはgetterとsetterの両方があります：atom(get => get(baseAtom).toUpperCase(), (get, set, newValue) => set(baseAtom, newValue.toLowerCase()))。読み取り時には変換された値を返し、書き込み時には変換して保存します。

このパターンにより、base atomを直接公開せずに双方向のデータ変換を実装できます。

getter関数は非同期にもできます：const userAtom = atom(async get => { const id = get(userIdAtom); return await fetchUser(id); })。Jotaiはatomのgetterから返されるPromiseをそのまま受け入れます。

userIdAtomが変更されると、Jotaiは非同期getterを自動的に再実行し、データ取得中は使用側のコンポーネントをサスペンドします。

非同期atomはReact Suspenseとシームレスに連携します。使用側のコンポーネントをfallback付きのSuspense境界でラップします。Promiseが保留中の間はコンポーネントがサスペンドし、解決されるとレンダリングされます。

これにより、コンポーネントでローディング状態を手動管理する必要がなくなります。isLoadingフラグも、データ取得のためのuseEffectも不要です。

jotai/utilsからloadableをインポートします。非同期atomをラップします：const loadableUserAtom = loadable(userAtom)。loadableUserAtomを読み取るコンポーネントは、サスペンドすることなく、{state: 'loading'}、{state: 'hasData', data: user}、または{state: 'hasError', error}を受け取ります。

Suspense境界に依存せず、インラインでカスタムのローディング状態を表示する必要がある場合にloadableを使用します。

jotai/utilsのatomWithResetユーティリティは、RESETシンボルを使って初期値にリセットできるatomを作成します。初期値を手動で追跡して再適用するよりも、すっきりと実装できます。

フォームでは、送信またはキャンセル時に、1つのハンドラー内で各setterにRESETを渡してすべてのフィールドatomをリセットできます。

派生atomは複数のatomから読み取れます：const summaryAtom = atom(get => ({ user: get(userAtom), settings: get(settingsAtom), count: get(countAtom) }))。これにより、いずれかの依存関係が変更されると更新される、単一の安定した参照が作成されます。

summaryだけが必要なコンポーネントは、3つの個別のatomすべてを購読するのではなく、summaryAtomを購読できます。

派生atomは条件に応じて異なるatomを読み取れます：const activeDataAtom = atom(get => get(modeAtom) === 'A' ? get(dataAAtom) : get(dataBAtom))。modeAtomが切り替わると、派生atomはデータソースを自動的に切り替えます。

Jotaiは評価のたびに正しいatomを再購読するため、非アクティブな分岐の古いデータが残りません。

非同期atomのgetterが例外をスローするかrejectされた場合、Suspenseとともに使用すると、エラーは最も近いReactのエラーバウンダリに伝播します。loadableを使用する場合は、インラインで処理できるよう、エラーがstate.errorフィールドに現れます。

本番コードでは、非同期atomには必ずErrorBoundaryまたはloadableラッパーのいずれかを組み合わせてください。

派生atomは直前の結果をメモ化します。すべての依存atomが前回の評価と同じ値を返す場合、派生atomは同じ参照を返すため、下流の再レンダリングは発生しません。

大規模な配列変換など計算コストの高い派生処理では、追加設定なしでこのメモ化による大きなパフォーマンス上のメリットが得られます。

Promiseが保留中の間、非同期atomを読み取るコンポーネントはどうなりますか？

派生atomは、getter関数と依存関係の自動追跡を使って、他のatomから値を計算します。非同期atomは非同期getterを使用し、デフォルトでReact Suspenseと連携します。Suspenseを使わずにローディング状態やエラー状態をインラインで処理するには、jotai/utilsのloadableを使用します。

書き込み可能な派生atomでは双方向の変換が可能になり、条件付きatomでは他のatomの値に基づいてデータソースを動的に切り替えられます。