Recoilについて

最近注目されているRecoilについてです！

Recoilとは？

Recoilは、Meta（旧Facebook）が2020年5月頃に発表した状態管理ライブラリです。
現在まだ実験的な状態管理ライブラリになりますので、実際の案件で使用することは現段階ではまだ難しいと思います。

そもそもRedux（useState）とRecoilの違いとは？

Reactの状態管理といえば、Reduxだと思いますがReduxとRecoilの違いについて気になると思います。
ReduxとRecoilでは、「グローバルな状態管理が可能になる」という点では同じですがそれぞれの状態を個別に管理できるということが、ReduxとRecoilの大きな違いではないかなと思います。
Recoilでは、Atomを受け渡すだけで、どのコンポーネントでも変更が可能ということにです。
ReduxとRecoilの使い分けとして、少数のコンポーネントで状態管理を行う際はReduxで、複数のコンポーネントで状態の変更を行う祭はRecoilとなると思います。

それでは、実際にRecoilの使い方について説明させていただきます！

Recoilをインストール

まずは、Recoilをインストールします。

✅ npmの場合
npm install recoil

✅ yarnの場合
yarn add recoil

✅ TypeScriptに対応する場合
npm install --save @types/recoil

RecoilRootの設定

Recoilを使用するために、対象のスコープの外側をRecoilRootで囲む必要があります。
RecoilRootで囲むことでグローバルな状態管理をすることができます。

import React from 'react';
import {
  RecoilRoot,
  atom,
  selector,
  useRecoilState,
  useRecoilValue,
} from 'recoil';

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

Atom

AtomとはRecoilにおけるデータストアのことで、状態の単位になります。

const textState = atom({
  key: 'textState', // unique ID (with respect to other atoms/selectors)
  default: '', // default value (aka initial value)
});

Atomからの読み取りと、Atomへの書き込みが必要なコンポーネントは、useRecoilState()以下に示すように使用する必要があります。
状態の取得だけしたい場合はuseRecoilValue()を使い、状態の更新だけしたい場合はuseSetRecoilState()を使用します。

function CharacterCounter() {
  return (
    <div>
      <TextInput />
      <CharacterCount />
    </div>
  );
}

function TextInput() {
  const [text, setText] = useRecoilState(textState);

  const onChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div>
      <input type="text" value={text} onChange={onChange} />
      <br />
      Echo: {text}
    </div>
  );
}

Selector

Selectorは、Atomの状態を加工した値を返したり、更新するなどの処理を可能にします。

const charCountState = selector({
  key: 'charCountState', // unique ID (with respect to other atoms/selectors)
  get: ({get}) => {
    const text = get(textState);

    return text.length;
  },
});

まとめ

今回、注目のRecoilの使用方法についてまとめました。
まだ実験的なライブラリなので、情報収集程度に記事を読んでいただけたらと思います。

参考記事

✅ 公式ドキュメント
https://recoiljs.org/

✅ Github
https://github.com/facebookexperimental/Recoil