Zenn
😒

今更Recoilについて語ってみた。

2022/04/25に公開
React
TypeScript
Recoil
frontend
状態管理
tech

はじめに

Recoilってこんな風に書くんだ。useStateとの違いって何？みたいな部分をこの記事でつかんでいただいたら光栄です。

間違っている部分等あればコメントいただけると助かります。

Recoilとは

Recoilは、FaceBook社(現META社)によって開発された状態管理ライブラリです。
背景としてはContext APIが抱える制約、問題を解決するためとされています。

Recoil主要機能

RecoilRootってなに？

RecoilRootはRecoilを使用するために定義するものであり、推奨されている配置場所に関してはルートコンポーネントとされています。
これを定義することにより、その子供のコンポーネント内の中でRecoilを使えることになります。

import { RecoilRoot } from "recoil"
import { Components } from "./components" 

function App() 
  return (
    <RecoilRoot>
      <Components />
    </RecoilRoot>
  );
}

Atomって何？

Atomは簡単に言うと状態の単位となるもの
useStateと同様に値が変化するとコンポーネントは再レンダリングされます。
keyはユニークである必要があり, defaultに初期値を格納します

// 例 名前を入力するようなフォームの場合
export const nameState = atom<string>({
  key: "nameState"
  default: "" 
})
// 例　数字を持つ場合
export const countState = atom<number>({
  key: "countState"
  default: 0
})

Selectorって何？

SelectorはAtomの値を加工した値を返したり、stateの値を新しくして返却することができます。
こちらもAtom同様にkeyはユニークである必要性があります。

import { selector } from "recoil"
import { countState } from "./Atom.ts"
 
export const countSelector = selector({
  key: "countSelector"
  get: ({ get }) => {
    // 定義したatomの値をgetで呼び出す
    const count = get(countState)
    return count + 1
  }
});

useRecoilStateってなに？

useRecoilStateはAtomの値を取得、更新できるhooksであり、useStateと同様に最初の要素が、状態の値であり、2番目の要素がset関数となっており、状態の値を更新できます。

import { useRecoilState } from "recoil"
import { CountState } from "./Atom.ts"

export const ComponentA = () => {
  const [count, setCount] = useRecoilState(CountState)
  // useRecoilStateを使ってatomを呼び出す

  const onClick = () => {
    setCount(count + 1)
 }

    return (
      <button onClick={onClick}>
        カウント
　　　 </button>
    )
}

useSetRecoilStateってなに？

useSetRecoilStateは簡単に言うとset関数だけを実行できる関数です。
状況に応じて使い分けたい場合、例えばこのcomponent内では値の取得はせずに値の変更だけ行いたいなどの場合に大活躍します。

const setName = useSetRecoilState(nameState)

const changeName = (e: React.ChangeEvent<HTMLInput>) => {
   setName(e.target.value);
 };

return <input onChange={onChangeName} placeholder="名前" />

useRecoilValueってなに？

useRecoilValueはuseSetRecoilStateと違い、値を呼び出すだけの関数になっており、
変更されたatomの値、selectorで加工した値を呼び出すときに主に使用します。

例　入力した文字数をselectorで加工しcomponentで参照したい場合

export const nameState= atom<string>({
  key: "nameState",
  default: ""
});

export const textLengthSelector = selector({
  key: "textLengthSelector",
  get: ({ get }) => {
  
  const text = get(nameState)
  return text.length
})   

const textCount = useRecoilValue(textLengthSelector)

return <div>入力した文字数は{textCount}</div>

useResetRecoilStateってなに？

useResetRecoilStateは状態をデフォルト値に戻す関数であり、例えば脳死で以下のようなコードを書いたとします。

before

const [name, setName] = useRecoilState(nameState)

const resetButton = () => {
  setName("")
}

return  <button onClick={resetButton}>リセット</button>

このようにリセットボタンを押すと、formの値をリセットするような処理がある場合、set関数を使って上記のようなコードで実行すると無駄なレンダリングが生じます。しかしuseResetRecoilStateを使えば無駄なレンダリングが生じなくなります。

after

const [name, setName] = useRecoilState(nameState)

const resetNameState = useResetRecoilState(nameState)

return <button onClick={resetNameState}>リセット</button>

さいごに

ここまで読んでくださりありがとうございました。
状態管理ってこんなものなんだーみたいな感じで読んでいただけたら光栄です

Discussion