Open1

【React Recoil】Recoilによる状態管理の仕方

yu.miyoshiyu.miyoshi

概要

Recoilを用いた状態管理方法について・使い方についての備忘録になります。

Atom

複数のコンポーネントをまたいでpropsを用い、ステートを渡さずに
対象となる範囲の複数のコンポーネント間で使用することがグローバルなステートをRecoilではAtomと呼びます。

const numberState = atom({
  key: "numberState",
  default: 0
});

keyはAtomを識別する文字列(グローバルにユニークなものを用いる)
Atomの宣言はステートを宣言するだけです。
そのあとどのように使われるかは記述せず、ReactのuseStateという機能と似ています。

指定したAtomを使うときには、RecoilのuseRecoilStateを使います。

const AddButton = () => {
  const [count, setCount] = useRecoilState(numberState);
  return (
    <p>
      <button onClick={() => setCount(num => num + 1)}>{count}</button>
    </p>
  );
};

countがそのAtomの現在の値で、(グローバルなステートから取得してきた)setCountに引数を与え、Atomの値を更新させます。
atom({ ... })は、ステートを作る部分だけでということだけであり、従来のように「useStateによって手に入れられるステートの値」ではなく、「ステートそのもの」という概念です。

その他のフック

  • useRecoilState → 読み書き両対応
  • useRecoilValue → 読み取り専用
  • useSetRecoilState → 書き込み専用

useRecoilValue

// useRecoilValueを使う場合
const count = useRecoilValue(numberState)

useSetRecoilState

// useSetRecoilStateを使う場合
const setNumber = useSetRecoilState(numberState);

参考サイト

https://recoiljs.org/docs/introduction/core-concepts/
https://blog.uhy.ooo/entry/2020-05-16/recoil-first-impression/#recoilの基本的な使い方