[React] Recoilの簡単な使い方

#Recoilで何ができる？
ざっくり言うと、簡単にReactでグローバルなStateの管理ができる。

Recoilに触れてみる

何はともあれ触れてみよう

install

とりあえずnpmでinstall。

npm install recoil

参照範囲を決める

App.js

export default function App() {
  return (
    <RecoilRoot> //RecoilRootで囲む
      <exComponent />
    </RecoilRoot>
  );
}

設定するState参照範囲はRecoilRootで囲んだ部分に限定される。
今回はグローバルに設定したいので、App.jsの外枠にRecoilRoot。

State定義用のfileの作成

src配下にstoreというフォルダを作って格納するのがわかりやすいかもしれない。
State定義のみなので、jsファイルで可。今回はexState.jsを配置した。

Stateの定義

exState.js

import {atom} from "recoil"

export const exState = atom ({ //atom で囲む必要がある
 key: "exState" //参照時に必要なキー
 default: {flag: true} //default値
})

定義するStateはまずatomで囲む（atomic designとは関係ない）。
初期値としてState参照時に必要なkey,default値として持っておくdefaultを格納しておく。

使用する

実際に使用してみる。

Stateの値、更新関数を参照する場合

[exState, setExState] = useRecoilState(exState)

Stateの値のみを参照する場合

exState = useRecoilValue(exState)

Stateの更新関数のみ参照する場合

setExState = useSetRecoilState(exState)

##まとめ
グローバルなState管理はContextを使用しても良いが、Recoilのほうが直感的でおすすめかもしれない。