Recoil apiまとめてみた②～useRecoilState、useRecoilValue、useSetRecoilState～

今回は、Recoilで頻繁に利用されるhooksのuseRecoilState、useRecoilValue、useSetRecoilStateをまとめます。

前回の記事はRecoil apiまとめてみた①～atom、selector～です！

useRecoilState
useRecoilValue
useSetRecoilState

useRecoilState

RecoilState型のデータを渡すことで、ステートとステートへのセッター関数を配列で受け取る。最初の要素がステートで、２番目がセッター関数である。

useStateと同じような使い方をイメージすればOK。

ステートが更新されれば、それを使用するコンポーネントは再レンダリングされる。

使い方サンプル

type Hoge = {
  id: string;
  name: string;
};

const hogeState = atom<Hoge>({
  key: 'hoge',
  default: {
    id: 'hogeId',
    name: 'hogeName',
  },
});

const HogeComponent = () => {
  const [hoge, setHoge] = useRecoilState(hogeState);
}

引数

名前	型	備考
`state`	`RecoilState<T>`	`atom`または書き込み可能な`selector`

戻り値

型	備考
`[T, SetterOrUpdater<T>]`	最初の要素　：ステート２番目の要素：セッター関数セッター関数は以下の２パターンを受け付ける１．新しい値を受け取る２．前の値を引数に受け取るアップデート関数

useRecoilValue

RecoilValue型のデータを渡すことで、ステートを受け取る。セッター関数は受け取らない。

ステートを使って画面表示するだけのコンポーネントでは、useRecoilValueを使うのがベター。

ステートが更新されれば、それを使用するコンポーネントは再レンダリングされる。

使い方サンプル

type Hoge = {
  id: string;
  name: string;
};

const hogeState = atom<Hoge>({
  key: 'hoge',
  default: {
    id: 'hogeId',
    name: 'hogeName',
  },
});

const HogeComponent = () => {
  const hoge = useRecoilValue(hogeState);
}

引数

名前	型	備考
`state`	`RecoilValue<T>`	`atom`または`selector` ※書き込み可能かどうかは問わない

戻り値

型	備考
`T`	ステート

useSetRecoilState

RecoilState型のデータを渡すことで、ステートのセッター関数を受け取る。ステート自身は受け取らない。

ステート自身は使わず、更新処理だけが存在するコンポーネントでは、useSetRecoilStateを使うのがベター。

ステートが更新されても、useSetRecoilStateを使っているコンポーネントは再レンダリングされない。

使い方サンプル

type Hoge = {
  id: string;
  name: string;
};

const hogeState = atom<Hoge>({
  key: 'hoge',
  default: {
    id: 'hogeId',
    name: 'hogeName',
  },
});

const HogeComponent = () => {
  const setHoge = useSetRecoilState(hogeState);
}

引数

名前	型	備考
`state`	`RecoilState<T>`	`atom`または書き込み可能な`selector`

戻り値

型	備考
`SetterOrUpdater<T>`	セッター関数セッター関数は以下の２パターンを受け付ける１．新しい値を受け取る２．前の値を引数に受け取るアップデート関数