Atoms：Jotaiにおける状態の単位

Jotaiでは、状態をatomと呼ばれる小さく独立したリアクティブな状態の単位に分割します。各atomは1つの値を保持し、atom(initialValue)を使ってコンポーネントの外部で作成します。

これは、1つの大きなstoreオブジェクトではなく、状態を意味のある最小単位に分割するという考え方に対応しています。

atomの値が変わると、そのatomを購読しているコンポーネントだけが再描画されます。他のatomを読み取っているコンポーネントには影響しません。

このきめ細かなリアクティビティが、変更のたびにすべてのコンシューマーを再描画するReact Contextに対するJotaiの大きな利点です。

atomはモジュールレベルで定義します。例：const countAtom = atom(0)。これにより、再描画のたびにatomが再作成されず、レンダリング間でatomの識別子が安定します。

Atomは軽量な参照であり、それ自体の値を保持しません。値はJotaiのstoreに保存されます。

デフォルトでは、Jotaiは暗黙的なグローバルstoreを使用します。atomを使い始めるためにアプリをProviderでラップする必要はないため、既存のプロジェクトにも簡単に導入できます。

prop drillingやcontextの受け渡しを行わなくても、ツリー内のどのコンポーネントからでもatomにグローバルにアクセスできます。

同じコンポーネントツリーの独立したインスタンスを複数作成する必要がある場合（それぞれが独自のフォーム状態atomを持つ2つの別々のフォームなど）は、各インスタンスをJotaiのProviderでラップします。各Providerが分離されたstoreを作成します。

これは、マイクロフロントエンドアーキテクチャや、独立した状態の領域を持つ複雑なページレイアウトで便利です。

グローバルstoreはアプリケーションの存続期間中atomを保持します。一方、スコープ付きProviderのstoreはProviderのアンマウント時にリセットされるため、モーダルダイアログやグローバルに永続化したくないページ単位の状態に適しています。

Providerにカスタムstoreインスタンスを渡して、サーバーサイドレンダリングを分離することもできます。

Zustandはセレクターを備えた単一のstoreオブジェクトを使用し、不要な再描画を防ぎます。Jotaiは状態をatomに分割し、各コンポーネントは読み取るatomだけを購読します。

Jotaiは、きめ細かなUI状態（個々の入力値や切り替えフラグ）に適しています。Zustandは、より大規模で相互に関連するアプリケーション状態に適しています。

React Contextでは、コンテキストの値が変わるたびにすべてのコンシューマーコンポーネントが再描画されます。コンシューマーコンポーネントがコンテキストオブジェクト内の1つのフィールドだけを必要としている場合も同様です。

Jotaiはこの問題を解決します。useAtom(nameAtom)を使用するコンポーネントは、他のatomが変わったときではなく、nameAtomが変わったときだけ再描画されます。

JotaiはデフォルトでObject.isによる比較を使用し、atomの値が変わったかどうかを判定します。atomに現在保持している値と同じ値を設定しても、再描画は発生しません。

複雑なオブジェクトには、selectAtomユーティリティを使って大きなatomから安定したプリミティブ値を導出すると、関係のないフィールドが変わったときの再描画を防げます。

useStateは単一のコンポーネントに限定されます。Atomは明示的に受け渡さなくても、コンポーネントツリー全体で共有できます。2つの兄弟コンポーネントが同じatomを読み取ると、それらは自動的に同期した状態になります。

これにより、コンポーネント間で状態を共有するために状態を上位へ持ち上げる必要がなくなり、再描画も最小限に抑えられます。

代表的なatomには、const themeAtom = atom('light')、const cartItemsAtom = atom([])、const selectedUserIdAtom = atom(null)があります。これらは一度定義し、アプリケーション内のどこからでもインポートできます。

各atomは独立しています。cartItemsAtomを更新しても、themeAtomだけを読み取っているコンポーネントでは再描画は発生しません。

再レンダリングに関して、JotaiはReact Contextとどのように異なりますか？

atomはJotaiにおける状態の基本単位です。コンポーネントの外部でatom(initialValue)によって作成し、デフォルトではProviderなしでツリー全体から共有できます。atomが変更されると、その購読者だけが再レンダリングします。

この細粒度のリアクティビティが、React Contextに対するJotaiの大きな利点です。また、atomごとの購読モデルは、単一ストアを使用するZustandの方式とは異なります。