さくっと始めるRecoil入門

はじめに

今回はReactの状態管理ライブラリであるRecoilについてまとめていきます。

それでは、頑張って行きましょう。

Recoilとは

RecoilはFacebook社が作成した状態管理ライブラリです。Context APIの成約を解決するために開発されたみたいです。

以下、こちらの記事の引用

Context APIの制約

Reactのみで状態管理を完結させようとすると、Context APIを用いてアプリケーションの状態を管理させることになります。基本的に問題はないのですが、Context APIにはいくつかの制約があります。
たとえばContext APIで管理されているReactコンポーネントの状態を変更するためには祖先コンポーネントまで辿ってツリーを更新しなくてはいけません。大元のコンポーネントが巨大だった場合はそのぶん更新するツリーも大きくなるため、再レンダリングのコントロール難易度が上がってしまいます。うまく管理しないと巨大なツリー更新によるパフォーマンスの低下を招いたり、コンポーネントの状態が意図せずリセットされてしまうことが起こりかねません。

Recoilとは

Recoilは、Context APIが抱えるこれらの制約・問題を解決するためにFacebookによって提唱された実験的な状態管理ライブラリです。「Atom」「Selector」と呼ばれる単位を使用してアプリケーションデータを管理し、各Atomには一意のキーとそれが管理するデータの一部が含まれています。各Selectorは複数のAtomにもとづく派生状態の一部で、Atom・他のSelectorを受け取る純粋な関数として定義します。これらの単位をHooks APIで操作しながら状態管理を行うのがRecoilです。

Recoilのざっくりとした使い方

それでは、Recoilのざっくりとした使い方を見ていきましょう。

Recoilの導入

まずは、以下のコードでRecoilをインストールしましょう。

npm install recoil

あとは、_app.tsxを<RecoilRoot>で囲うだけです。

app.tsx

import { RecoilRoot } from 'recoil';

export default function MyApp(props: AppProps): JSX.Element {
  const { Component, pageProps } = props;

  return (
      <RecoilRoot>
        <Component {...pageProps} />
      </RecoilRoot>
  );
}

Atomの作成

RecoilはAtomというステートオブジェクトを作成して使用します。Atomは、Stateとセッター関数を切り出すことができる箱のような概念であり、このAtomをエクスポート・インポートすることによって、コンポーネントの間でStateを共有します。

また、AtomからStateやセッター関数を切り出すときは、hooksのインターフェースを用いるため、学習コストも低めです。

AtomからStateのみを切り出しても良いし、セッター関数のみを切り出しても構いません。

まずは、Atomを作成してみましょう

const countState = atom<number>({
  key: 'sample/count',
  default: 0
});

AtomからStateとセッター関数の切り出し

それでは次に、このAtomからStateとセッター関数を切り出しましょう。

import { useRecoilState } from 'recoil';

const Counter = () => {
  // atomから状態を取り出す
  const [count, setCount] = useRecoilState(countState);

  return <div onClick={() => setCount((c) => c + 1)}>Clicked: {count}</div>;
};

AtomからuseRecoilStateを用いてStateとセッター関数を切り出すのは、useStateを用いてStateとセッター関数を作成する感覚とほぼ同じです。

作成したAtomをエクスポートし、使用したいコンポーネントでインポートすれば、状態をコンポーネント間で共有することができます。

AtomからStateのみ、セッター関数のみを切り出し

useRecoilValueを使用すると、AtomからStateだけを切り出す事ができます。

import { useRecoilValue } from 'recoil';

const Counter = () => {
  // atomから状態を取り出す
  const count = useRecoilValue(countState);

  return <div>{count}</div>;
};

また、useSetRecoilStateを使用すると、セッター関数のみを切り出すことができます。

import { useSetRecoilState } from 'recoil';

const Counter = () => {
  // atomからセッター関数を取り出す
  const setCount = useSetRecoilState(countState);

  return <div onClick={() => setCount((c) => c + 1)}>Increment!</div>;
};

ここまでが、Recoilのざっくりとした使い方になります。