Reactの状態管理ライブラリの一つです。2020年に発表されてReactを作っているfacebookが開発しているライブラリのためこれから主流になるといわれています。非常に簡単にグローバルな状態管理を実現できます。
メリット
- いくつもストアが分かれているので間違えて状態を更新してしまったとしても影響を最小限にとどめることができます。
- useContextと違ってレンダリングの対象を最小限にとどめることができます。(Reduxなどと同じく）
他の状態管理手法との違い
Reduxとの違い
Reduxではストアは一つでしたが、Recoilはストアをいくつも持つことができます。
useContextとの違い
Recoilならレンダリングをある程度最適化してくれます。
具体的に言えば、「useSetRecoilState」という更新関数だけ実行しているコンポーネントは再レンダリングしないという設定にしてくれます。（useRecoilStateという参照関数だけ再レンダリングする。）
インストール
recoilのインストール
|
1 |
npm install recoil |
recoilの型定義ファイルインストール(typescriptの場合）
|
1 |
npm i @types/recoil |
設定
ルート階層を「RecoilRoot」で囲います。
|
1 2 3 4 5 6 7 8 9 10 11 |
import { RecoilRoot } from "recoil"; function App() { return ( <RecoilRoot> <div> XXX </div> </RecoilRoot> ); } |
ストア(atom)の作成
文字列（string)
|
1 2 3 4 5 6 |
import { atom } from "recoil"; export const xxxState = atom<string>({ key: "xxxState", default: "", }); |
default
ストアのデフォルト値になります。
値を取り出す。
「useRecoilValue」というものを使います。
|
1 2 3 4 |
import { xxxState } from "../states/xxxState"; import { useRecoilValue } from "recoil"; const xxx = useRecoilValue(xxxState); |
値を設定する
「useSetRecoilState」というものを使います。なお、値を設定するだけのコンポーネントは再レンダリングは発生しません。（再レンダリングの最適化）
|
1 2 3 4 5 |
import { xxxState } from "../states/xxxState"; import { useSetRecoilState } from "recoil"; const setXXX = useSetRecoilState(xxxState); setXXX("設定値"); |
配列
|
1 2 3 4 |
export const xxxState = atom<string[]>({ key: "xxxState", default: [], }); |
値を設定する
配列の場合は元の配列も一緒に指定してあげる必要があるので、「useRecoilValue」とセットで使うのが一般的になります。
|
1 2 3 4 5 |
import { xxxState } from "../states/xxxState"; import { useSetRecoilState } from "recoil"; const setXXX = useSetRecoilState(xxxState); setXXX([...元の配列値,追加する値); |
ストア(atom)に対する命令
selectorというものを使います。
|
1 2 3 4 5 6 7 8 9 |
import { selector } from "recoil"; export const 処理名 = selector<number>({ key: "処理名", get: ({ get }) => { const 変数 = get(xxxState); return 処理; }, });ゆ |
get
atom名を引数に渡せば、他のatomにアクセスができます。
ユースケース
- 配列の長さを取得したい
- 非同期処理で何らかの処理を加えたい。
この記事へのコメントはありません。