フロントエンドの状態管理ツールの１つであるRecoil。
その使い方として、状態管理したい変数をatomやselectorに定義し、getやset、resetで、取得、更新、初期化する、という流れですが、useRecoilStateやuseRecoilValueなどのReact hooksとの違いがいまいちピンと来なかったので整理しました。
Recoilとは
RecoilはReactのための状態管理ライブラリで、コンポーネント間での状態共有を簡単にすることを目的としています。Recoilでは、AtomとSelector、そしてそれらを利用するためのいくつかのhooksが提供されています。
AtomとSelector
- Atom: Recoilの状態管理の基礎となる概念で、管理したい変数の状態を定義するものです。Atomの値が変更されると、そのAtomをウォッチしているコンポーネントが再レンダリングされます。
- Selector: 派生状態（他のAtomやSelectorの値に基づいて計算される値）を表します。Selectorは、依存しているAtomや他のSelectorの値が変更された場合にのみ再計算されます。
上記AtomやSelectorは、get、set、resetという関数を使って操作できます。
- get: AtomやSelectorの現在の値を取得します。
- set: Atomの値を設定します。Selectorにおいては、その依存するAtomの値を設定するのに使用されることがあります。
- reset: Atomの値を初期値にリセットします。
React Hooks
Recoilでは、これらのAtomやSelectorをコンポーネント内で利用するためのいくつかのReact hooksが提供されています。
- useRecoilState: これはReactの
useStateと同様、Atomの現在の状態と、その状態を更新する関数を返します。これを使うことで、コンポーネント内でAtomの状態を読み書きすることができます。 - useRecoilValue: AtomまたはSelectorの現在の値のみを返します。このhookは、状態の読み取りだけで十分な場合に便利です。
- useSetRecoilState: Atomの状態を更新する関数のみを返します。これは、現在の状態を読み取る必要がないが、更新は必要な場合に使用します。
- useResetRecoilState: 指定されたAtomの状態を初期値にリセットする関数を返します。
違い
- AtomやSelectorの
get、set、resetは主に状態の定義や更新のロジックを記述するために使用されます。直接コンポーネント内で呼び出すこともできるが、hooksを使った方が便利、ということらしいです。 useRecoilState、useRecoilValueなどのhooksは、コンポーネント内でRecoilの状態（AtomやSelector）を効果的に利用できます。内部的にuseStateやuseEffectとget、setなどを組み合わせて、AtomやSelecotorを操作しているようです。useRecoilStateのコード（以下のリンク）を読むとそんな雰囲気がわかると思います。
つまり、AtomやSelectorのget, set, resetメソッドは状態を定義するときに利用し、hooksはその状態をReactコンポーネント内で呼び出したい時に利用する、という使い分けになります。
ただ、例えば以下の例のように、カスタムフックを作成して、そこでgetやsetメソッドを使うのもありだと思います（というか、色々やりたいなら、その方が扱いやすそう）。
