recoilに入門してみた

komosyu2023.03.09

はじめに

今回は React の状態管理ライブラリのrecoilについて解説していこうと思います。

これまでも状態の管理はuseContextやzustandは使ってみたことがあったのですが、recoilを触る機会があったので有名なライブラリだしこの機会に調べてみることにしました。
結論から言うと、これまで他の状態管理ツールを使ったことがあれば割と直感的にわかりやすく使えていい感じでした。

基本的な使い方

それではさっそくrecoilの基本的な使い方を見ていきましょう！
大きく分けて状態を設定側と使用する側があるので、以下でそれぞれを解説していきます。

インストール

npm install recoil

or

yarn add recoil

アプリケーション内で行う準備

recoilを使用するのにルートコンポーネントの中をRecoilRootで囲んであげます。

import { RecoilRoot } from 'recoil'

function App() {
  return (
    <RecoilRoot>
      <CharacterCounter />
    </RecoilRoot>
  )
}

設定側

atom

atomは最小単位の state を宣言します。

keyはユニークな値を設定(アプリケーション全体で一意の)。
defaultは初期値を設定。

import { atom } from 'recoil'

const atomState = atom({
  key: 'atom-key',
  default: 0,
})

selector

selectorは atom など他の state の取得と更新をします。

keyはユニークな値を設定(アプリケーション全体で一意の)。
getは引数に他の state を計算や加工をして取得(必須)
setは第一引数に他の state を入れて、第二引数に新しい値をを計算や加工をして更新(オプション)

import { selector } from 'recoil'

const selectorState = selector({
  key: 'selector-key',
  get: ({ get }) => {
    // atomStateで設定したdefaultの0を取得
    get(atomState)
  },
  set: ({ set }, newValue) => {
    // 第二引数の値をatomStateに設定
    set(atomState, newValue + 1)
  },
})

呼び出し側

引数にatomやselectorといった state を入れて使います。

useRecoilValue

useRecoilValueは値の取得をします。

import { useRecoilValue } from 'recoil'

export const GetCountValue = () => {
  // atomStateの値を取得
  const value = useRecoilValue(atomState)
  return <div>{value}</div>
}

useSetRecoilValue

useSetRecoilValueは値の更新をします。

import { useSetRecoilState } from 'recoil'

export const SetCountValue = () => {
  // 更新用の変数を設定
  const setValue = useSetRecoilState(atomState)
  // atomStateの値を更新
  return <button onClick={() => setValue((v) => v + 1)}>+1</button>
}

useRecoilState

useRecoilStateは値の取得も更新もできます。
なので、useRecoilValueとuseSetRecoilValueを使う場面は限られてくるかもしれませんね。
ただ、値の取得をする場合には値が変化すると再レンダリングが発生してしまいパフォーマンス的にもよろしくない場合があるので、更新の必要はなく取得のみをしたい場合はuseRecoilValueを使うとよいでしょう。

import { useRecoilState } from 'recoil'

export const CountValue = () => {
  // useStateみたいに第一引数に現在のstate、第二引数に更新用の関数を設定します
  const [value, setValue] = useRecoilState(atomState)
  return (
    <>
      <span>{value}</span>
      <button onClick={() => setValue((v) => v + 1)}>+1</button>
    </>
  )
}

参考

さいごに

recoilを使う機会があったのをきっかけでまとめてみたのですが、これまでに触れたことがなくてもわりと感覚的にシンプルに使うことができたので、これからまた別のプロジェクトでも使ってみたいなと思いました。

また、今回は超基本的な内容のみのとなりましたが、これからまた使っていく中でつまったところや便利なところなどを記事にしていきます。